如何实现网站的黑白效果

众所周知，今天发生了一件悲痛的事情，很多app也把内容换成了黑白两色。我们今天只谈技术，看看这种效果是如何实现的。

其实实现这种效果比我们想象的要简单的多的多，只需要一行代码，准确的说，只需要一个css样式——filter！

看一下filter的介绍

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。

滤镜通常用于调整图像、背景和边框的渲染

简单来说，filter就是给元素添加一个滤镜实现元素的高斯模糊、明亮、灰度、对比度、阴影、色相等效果。

因此，我们可以将元素的灰度调整为百分百，实现完全黑白的效果。

filter: grayscale(1)

我们以斗鱼为例，打开某位主播的直播间，在HTML的元素样式中添加 filter: grayscale(1)

可以看到，页面就变成黑白的了。

接下来我们再找个页面验证，看看网站是不是这样做的。打开B站的开发者工具(F12)。

点到html元素，可以看到html元素现在是class="gray"，其添加了很多filter样式

    filter: grayscale(95%);    -webkit-filter: grayscale(95%);    -moz-filter: grayscale(95%);    -ms-filter: grayscale(95%);    -o-filter: grayscale(95%);    filter: url(data:image/svg+xml;utf8,<svg 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>#grayscale);    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=.95);    -webkit-filter: grayscale(.95);

这么多的样式其实是为了适配不同浏览器的，比如-moz-filter 就是火狐浏览器专有的filter样式。我们把这些样式前面的对号都取消，再查看页面

此时的页面基本都变成彩色的了，还有部分区域仍是黑白的，可能是单独进行了设置，我们就不进行深究啦。

再看知乎，同样是filter属性发挥了作用