CSS制作多层重叠渐变

原创 2007年10月05日 13:35:00

2007年发表于IT168  链接地址:http://publish.it168.com/2007/0531/20070531037301.shtml

笔者根据效果图大致模拟了一张两层渐变的重叠效果图,如下:


图1

    图一采用两层渐变构成,第一层是从上到下的渐变,大小为200px*200px,颜色从#111111过渡到#dddddd,第二层是是从左到右的渐边,右端与第一层渐变对齐,大小为30px*200px,颜色从#aaaaa过渡到#222222,并且透明度为40%,我们可以发现,由于第二层渐变含用透明度,所以上面的色彩明显比下面的色彩要深一点,然而切图却需要将整幅图切成一块。

    首先我们先来看看这个CSS滤镜:
    FILTER:progid:DXImageTransform.Microsoft.Gradient

    语法:

    filter : progid:DXImageTransform.Microsoft.Gradient ( enabled=bEnabled , startColorStr=iWidth , endColorStr=iWidth )

    具体属性我这就不再多讲了,大家有兴趣可以到网上搜一下苏小雨的样式表滤镜中文手册。

    具体实现代码:

<style>
.aDiv
{
position:absolute;
top:0px;
left:0px;
width:200px;
height:200px;
z-index:1;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff111111",endColorStr="#ffdddddd",gradientType="0" );
}

.bDiv
{
position:absolute;
top:0px;
left:170px;
width:30px;
height:200px;
z-index:2;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#66aaaaaa",endColorStr="#66222222",gradientType="1" );
}
</style>
<div class="aDiv"></div>
<div class="bDiv"></div>

 2007年发表于IT168

利用CSS固定背景交替实现视差滚动效果

利用CSS固定背景交替实现视差滚动效果  外部样式表部分 *{  margin:0;  padding:0; } body{  font-family:"Trebuchet MS...
  • wustzbq0713
  • wustzbq0713
  • 2015-06-06 13:06:04
  • 908

div+css实现div的多层重叠,并且居中显示

  • 2012年11月04日 19:29
  • 16KB
  • 下载

CSS并不简单--带你认识不一样的渐变

这篇文章主要分享CSS3中linear-gradient和radial-gradient的知识,带给大家使用渐变的另一个角度。 一、线性渐变这里需要大家先去看一下基本语法,再看接下来的例子。 l...
  • dai_qingyun
  • dai_qingyun
  • 2017-05-12 19:56:43
  • 267

css3质感分析(5)径向渐变叠加纹理(圆心可变)

css3质感系列会详细分析网上流行的css3的一些质感效果, 让大家不再恐惧Css3,最终可以见到一张图片就可以构思出他的css3实现! 三个原则: 渐变叠加的顺序 径向渐变的起点...
  • zhangxianya1
  • zhangxianya1
  • 2015-07-09 16:18:13
  • 816

Jquery实现多层元素点击结果叠加效果_获取标签内容_叠加实例

1 原理,分别定义不同层标签,使用+连接号 累加获取内容 代码如下 4-4-1 *{margin:0;padding:0;} body { font-size: 13px; line-...
  • jintianhen1
  • jintianhen1
  • 2013-07-19 09:33:58
  • 1842

CSS3----画圆,渐变,旋转

用CSS画圆的技术初看起来不像CSS画三角技术那么有用
  • damys
  • damys
  • 2014-05-08 09:48:40
  • 4260

纯CSS代码导航栏渐变下拉菜单

今天尝试着做导航栏下拉菜单。 编写思路。 ①将二级menu的ul高度设为0px并将溢出的部分隐藏; ②再运用transition过渡高度和透明度的方式编写渐变下拉菜单; ③用伪类hover...
  • katherinesiy
  • katherinesiy
  • 2016-12-14 23:14:07
  • 733

由中间向两边渐变的分割线

原理是使用css3的渐变背景,再将高设为分割线的高度 .title{ position:relative; text-align:center; } .title:bef...
  • CallMeQiuqiuqiu
  • CallMeQiuqiuqiu
  • 2017-05-19 16:03:30
  • 605

CSS中定位元素的重叠

如果在一个页面中同时使用几个定位元素,就可能发生定位元素重叠的情况,默认的情况下,后添加的元素会覆盖先添加  的元素,通过使用层叠定位属性(z-index),可以调整各个元素的显示顺序。   1....
  • woshisap
  • woshisap
  • 2013-01-09 15:13:16
  • 7125

css3实现border渐变色

话不多说 ,直接上代码: .box{ width: 100px; height: 100px; border:10px solid #ddd; borde...
  • diwuyanting
  • diwuyanting
  • 2017-12-25 16:01:10
  • 432
收藏助手
不良信息举报
您举报文章:CSS制作多层重叠渐变
举报原因:
原因补充:

(最多只允许输入30个字)