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

想必大家都感受过了，很多网站在一夜之间变成了灰色。

效果如下：

这是B站的

这是的

那么这种效果怎么实现呢？

在网页按下F12，打开开发者模式，用元素选择器定位HTML标签，在样式版上就可以看到下面的代码。

filter: grayscale(85%) saturate(80%);
    -webkit-filter: grayscale(85%) saturate(80%);
    -moz-filter: grayscale(85%) saturate(80%);
    -ms-filter: grayscale(85%) saturate(80%);
    -o-filter: grayscale(85%) saturate(80%);
    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=.85);
    -webkit-filter: grayscale(.85) saturate(.8);

打开一个新的网站

将上面的代码添加到HTML上

可以发现网站变灰了。

那么这段代码是什么意思呢？

直接搜索filter grayscale

当参数为0时显示正常

60%时

100%时

grayscale()函数是一个内置函数，用于对图像应用滤镜以设置图像的灰度，此函数接受包含灰度值的单个参数量。灰度值根据数量和百分比设置。值0％表示原始图像，而值0％至100％之间的值表示效果的线性乘数。返回值为一个filter函数。

filter 函数可以用来改变图像的显示效果，用于 CSS 的 filter 属性。除了 grayscale 函数，可选项还有以下这些：