昨天，为了悼念新冠病毒牺牲的烈士，很多网站都把网站设置成了灰色。
示例
我选择了几个网站，先来看看它们是如何实现网站变灰效果的。
B站
html.gray {
-webkit-filter: grayscale(.95);
}
百度网盘
body {
filter: grayscale(100%);
}
百度
body.qm-activity #head_wrapper, body.qm-activity #s_menu_gurd, body.qm-activity #u1, body.qm-activity #u_sp, body.qm-activity .s-ctner-menus .s-menu-item-underline, body.qm-activity .s-news-rank-content, body.qm-activity .s-news-wrapper .s-news-list-wrapper .hot-point, body.qm-activity .s-news-wrapper .s-news-list-wrapper:nth-child(-n+3) img.s-news-img, body.qm-activity .s-top-left.s-isindex-wrap {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
360官网
html {
filter: progid:DXImageTransForm.Microsoft.BasicImage(grayscale=1);
-webkit-filter: saturate(0);
}
掘金
html.mourning {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: #808080;
}
网易官网
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter: none;
}
淘宝
html {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
网易云音乐
html {
filter: url(data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter i…0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale);
-webkit-filter: grayscale(1);
}
代码分析
综合以上各个示例，可以发现它们的实现网站变灰效果的代码都是通过filter属性实现的，不过有一些代码会加上一些浏览器的私有属性进行兼容，比如-webkit等。
在这些示例中，filter属性的赋值大致有两种（url和颜色除外）：grayscale和saturate。
grayscale
对图片进行灰度转换, 它是 <filter-function> 的子属性。
语法
grayscale(amount)
参数
mount：转换值的大小, 可以是<number> 或 <percentage>. 当值为100%时, 灰度最大. 0%时与原图没有区别. 0% 到 100% 之间的值会使灰度线性变化. amount 为空时会自动插入0.
saturate
该CSS功能是使输入图像超饱和或去饱和。
语法
saturate(amount)
参数
amount：转换量，指定为<number>或<percentage>。值100%过低会使图像去饱和，而值过高则会使图像100%饱和。值0%完全不饱和，而值100%保持输入不变。内插的lacuna值为1。
在这些代码里面，有一项对filter的赋值比较特殊：progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);，一眼看上去会感觉这个属性值的特别奇怪，在grayscale的外层包裹着一大串对象，其实这个属性值是为了兼容IE浏览器。
总结
一般使用css的filter属性使网站变色。但是css滤镜是比较消耗浏览器性能的，所以在非必要的情况下，不要使用css滤镜。
另外，大部分网站都是将filter属性挂载到了html标签上，但是百度却挂载到了body标签上。根据过往经验判断，在当前使用场景下，还是更推荐将filter属性挂载到html标签上。
