网页标准化:CSS制作多层重叠渐变

　　前段时间客户传来一张网站效果图，由于客户是做平面设计人员，并无制作网页的经验，因此效果图中大量使用渐变色,而且多层重叠着使用,导致整个切图工作无法进行，因此不得不考虑采用CSS样式。

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

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

关键词：

【推荐给好友】【关闭】

最新五条评论

查看全部评论

评论总数 0 条

您的评论

用户名： （新注册） 密　码： 匿名：

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有