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

刺骨的言语ヽ痛彻心扉 2023-09-25 13:56 48阅读 0赞

大家可能发现最近很多网站都变成灰色系，效果如下

![在这里插入图片描述][25aaa4fa8347423b9d6a639554fcd245.png]

![在这里插入图片描述][12d7c27025714da2a8b46d5d39ae8106.png]

![在这里插入图片描述][2673c09a71374404b47c4d9e4c88f77a.png]

它是怎么实现的呢？显然换一整套UI成本太大了，肯定不可能。

我们打开网站查看源码可以看到 html 标签上有这段源码。

![在这里插入图片描述][0bac55a3c0144693a8ba431792da25d8.png]

复制一下。

-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);

我们打开一个正常颜色的地址

![在这里插入图片描述][dc9dc6fef3924db09385c6ea1bdaa696.png]

将这段样式加到HTML标签上，就可以看到变成了灰色系。

![在这里插入图片描述][c767d2f7672f4d499f0e5b2cc5c27b31.png]

那这段代码是啥意思呢？

grayscale 是一个 CSS 函数，可以把图像转成灰色，参数值为0-1之间，结果返回一个 filter 函数。0 表示灰度为 0%，显示原图，1 表示灰度为 100% ，显示灰色。

grayscale(100%)

filter 属性可以改变元素的可视效果（如：模糊、对比度和饱和度等）。

filter: grayscale(100%);

所以`filter: grayscale(100%)`会呈现灰色哀悼模式，以此来纪念缅怀伟人先烈们。

[25aaa4fa8347423b9d6a639554fcd245.png]: https://img-blog.csdnimg.cn/25aaa4fa8347423b9d6a639554fcd245.png
[12d7c27025714da2a8b46d5d39ae8106.png]: https://img-blog.csdnimg.cn/12d7c27025714da2a8b46d5d39ae8106.png
[2673c09a71374404b47c4d9e4c88f77a.png]: https://img-blog.csdnimg.cn/2673c09a71374404b47c4d9e4c88f77a.png
[0bac55a3c0144693a8ba431792da25d8.png]: https://img-blog.csdnimg.cn/0bac55a3c0144693a8ba431792da25d8.png
[dc9dc6fef3924db09385c6ea1bdaa696.png]: https://img-blog.csdnimg.cn/dc9dc6fef3924db09385c6ea1bdaa696.png
[c767d2f7672f4d499f0e5b2cc5c27b31.png]: https://img-blog.csdnimg.cn/c767d2f7672f4d499f0e5b2cc5c27b31.png