是页面灰度,不是灰度测试啦!

112 阅读1分钟

背景

最近打开各大网站,主页都变成了灰度风格;当然我们也接到了需要页面灰度的需求。那么怎么实现页面灰度呢,各位看官且听我细细道来!

技术实现

首先咱们来了解一个css3的filter属性

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

属性参数说明

image.png

image.png

兼容性

image.png

具体实现

灰度前

image.png

灰度后

灰度代码

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);

image.png

页面灰度

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>