最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
网页标准化:CSS制作多层重叠渐变
时间：2022-07-02 12:56:13 编辑：袖梨 来源：一聚教程网
前段时间客户传来一张网站效果图，由于客户是做平面设计人员，并无制作网页的经验，因此效果图中大量使用渐变色,而且多层重叠着使用,导致整个切图工作无法进行，因此不得不考虑采用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 )
具体属性我这就不再多讲了，大家有兴趣可以到网上搜一下苏小雨的样式表滤镜中文手册。
具体实现代码：
| 代码如下 | 复制代码 |
相关文章
- 魔兽世界史诗奥迪尔怎么打 07-02
- PS如何用通道磨皮?ps通道磨皮基础教程 07-02
- 上古卷轴4重制版法师加点攻略 07-02
- NOVA(NOVA币)能上涨吗 07-02
- Hyperliquid (HYPE) 价格预测：供应紧缩或将推动价格突破100美元大关 - 来自Brave New Coin 07-02
- 秘影曼德拉会说话的骷髅三大部件位置一览 07-02