网站都变成灰色了，它是怎么实现的？

网站变灰

今天大家可以看到很多很多网站包括主页和内容也都已经变成了灰色，比如百度、B 站、爱奇艺、CSDN 等等。

实现

我们选择一个网站，比如 B 站吧，打开浏览器开发者工具。

审查一下网页的源代码，我们可以发现在 html 的这个地方多了一个疑似的 class，叫做 gray，gray 中文即灰色。

其 CSS 内容为：

html.gray {
    -webkit-filter: grayscale(.95);
}

果然是这个样式在起作用，而且是全局的效果，因为它是作用在了 html 这个节点之上的。

另外看看 CSDN，它也是用的这个 CSS 样式，其内容为：

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

这个实现看起来兼容性会更好一些。

因此我们可以确定，通过一个全局的 CSS 样式就能将整个网站变成灰色效果。