背景
最近打开各大网站,主页都变成了灰度风格;当然我们也接到了需要页面灰度的需求。那么怎么实现页面灰度呢,各位看官且听我细细道来!
技术实现
首先咱们来了解一个css3的filter属性
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
属性参数说明
兼容性
具体实现
灰度前
灰度后
灰度代码
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
页面灰度
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
IE实现
下列代码参考了张鑫旭大佬的文章
老版本IE浏览器中可以使用filter: gray;来实现该效果,IE5-IE9都兼容,缺点是需要点击“允许阻止的内容”,否则该属性不生效。
在IE10和IE11既无法使用老语法filter: gray;也无法使用CSS3新语法filter: grayscale(100%); 如果只需要对图片进行处理的话,可以使用SVG滤镜,首先创建一个SVG文件,并引入
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
在HTML中使用
<svg>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="zxx.jpg" x="0" y="0" width="256" height="190" filter="url('#grayscale')"></image>
</svg>