关闭

CSS制作多层重叠渐变

625人阅读 评论(0) 收藏 举报

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
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:119785次
    • 积分:1873
    • 等级:
    • 排名:千里之外
    • 原创:55篇
    • 转载:17篇
    • 译文:0篇
    • 评论:53条
    最新评论