css 如何让两个层叠加,网页标准化: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 )

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

具体实现代码：

代码如下	复制代码

css 如何让两个层叠加,网页标准化:CSS制作多层重叠渐变相关推荐

css怎么让两个table并排_关于CSS布局
水平居中水平居中可能是CSS布局中最常用到的布局,这里介绍几种水平居中的方式 1.使用inline-block 和 text-align实现 .parent{text-align: center;} ...
html盒子两个背景图片,css怎么实现两张图片叠加在一起,css添加盒子背景图片
css怎么实现两张图片叠加在一起CSS怎么实现了两张图片的叠加,Css实现了两张图片叠加在一起的方法:可以通过分别设置div与页面左边缘的距离和div与页面上边缘的距离来实现.需要注意的是,两张图片都 ...
asp.net 网页做一个浮动层_你们要的HTML、CSS布局技巧：如何规范搭建网页架构？
白天有知友邀请回答"如何规范布局网页结构"的问题,知乎上这类问题还挺多,我认为单就深入了解布局规范都足够说上一个月的,今天我就不论大范围,挑选小米网站首页的部分区块布局来讲解吧! ...
学习如何使用html和css样式将两张图片叠加到另一张图片上，实现微信扫一扫二维码效果
学习如何使用html和css样式将两张图片叠加到另一张图片上,实现微信扫一扫二维码效果 <!DOCTYPE html> <html> <head><meta ...
网页html怎么调整字样,怎么在css中设置两个字和三个字对齐
怎么在css中设置两个字和三个字对齐发布时间:2021-03-09 15:16:12 来源:亿速云阅读:85 作者:Leah 怎么在css中设置两个字和三个字对齐?针对这个问题,这篇文章详细介绍了 ...
css鼠标经过div1时div2消失,CSS_两个div叠加触发事件发生闪烁问题的解决方法，当鼠标移到div1上的时候，会出 - phpStudy...
两个div叠加触发事件发生闪烁问题的解决方法当鼠标移到div1上的时候,会出现div2.出现时div2在div1的上面,div2在出现后发生闪烁的问题. 于是开始找问题根源,发现原来是因为当我们触发 ...
在html页面上包含如下创建层,网页设计与制作试卷A答案
浙江**学院<网页设计与制作>期终(考试)A 卷 200 -200 学年第学期任课教师学院班姓名学号一.单选题(每小题1分,共30分) 1. 本地站点的所有文件和文件夹必须 ...
HTML盒子模型制作个人名片,网页设计基础 CSS盒子模型第4章 CSS盒子模型_教学设计.doc...
博学谷--让IT教学更简单,让IT学习更有效 PAGE 12 PAGE 1 <HTML+CSS+JavaScript网页制作案例教程> 教学设计课程名称: HTML+CSS+JavaSc ...
css dhtml动态网页教程,CSS/JSS DHTML动态网页制作
第0章本书导读 0.1 本书适合的读者群 0.2 动态超文本标记语言(Dynamic HTML)的概念 0.3 DTHML的特点 0.4 CSS和DHTML 0.5 JavaScript和DHTML ...

css 如何让两个层叠加,网页标准化:CSS制作多层重叠渐变

css 如何让两个层叠加,网页标准化:CSS制作多层重叠渐变相关推荐

最新文章

热门文章