如何使用css实现网站变灰效果

为了悼念新冠病毒牺牲的烈士，很多网站都在清明节那天把网站设置成了灰色。

示例

我选择了几个网站，先来看看它们是如何实现网站变灰效果的。

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,#grayscale);
    -webkit-filter: grayscale(1);
}

代码分析

综合以上各个示例，可以发现它们的实现网站变灰效果的代码都是通过filter属性实现的，不过有一些代码会加上一些浏览器的私有属性进行兼容，比如-webkit等。

在这些示例中，filter属性的赋值大致有两种（url和颜色除外）：grayscale和saturate。

grayscale

对图片进行灰度转换, 它是 的子属性。

语法

grayscale(amount)

参数

mount：转换值的大小, 可以是 或 . 当值为100%时, 灰度最大. 0%时与原图没有区别. 0% 到 100% 之间的值会使灰度线性变化. amount 为空时会自动插入0.

saturate

该CSS功能是使输入图像超饱和或去饱和。

语法

saturate(amount)

参数

amount：转换量，指定为或。值100%过低会使图像去饱和，而值过高则会使图像100%饱和。值0%完全不饱和，而值100%保持输入不变。内插的lacuna值为1。

在这些代码里面，有一项对filter的赋值比较特殊：progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);，一眼看上去会感觉这个属性值的特别奇怪，在grayscale的外层包裹着一大串对象，其实这个属性值是为了兼容IE浏览器。

总结

一般使用css的filter属性使网站变色。但是css滤镜是比较消耗浏览器性能的，所以在非必要的情况下，不要使用css滤镜。

另外，大部分网站都是将filter属性挂载到了html标签上，但是百度却挂载到了body标签上。根据过往经验判断，在当前使用场景下，还是更推荐将filter属性挂载到html标签上。

参考

filter - CSS（层叠样式表） | MDN