网页灰色 今天网站都变成灰色了，这其中是怎么实现的？

今天是2020年4月4日，星期六，清明节。

我们的国家经历了一个非常痛苦的时刻。许多英雄在帮助他人的路上倒下了，许多烈士和英雄为捍卫人民的安全而牺牲了。今天，降半旗。北京时间10点，全国默哀三分钟，向英雄们致敬。与此同时，所有公共娱乐活动今天都将停止，包括直播、综艺、影视、游戏等。

在此，我也向全国抗击新冠肺炎肺炎疫情的烈士和死难同胞表示深切哀悼，向所有在抗日前线工作的工人和医务人员致敬。在我们的和平面前，我们每一个人都是英雄的人墙。

网站灰显

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

程序员

爱奇艺

百度(全球最大的中文搜索引擎)

可以看到整个站的内容都变成了灰色，包括按钮，图片等等。此时，我们可能想知道这是如何做到的。

有人认为所有的内容都变成了一个CSS样式，图片都变成了灰色，按钮等样式也变成了灰色样式。但是你想想，成本太高了，一个控件忘了加灰风格岂不是太突兀？

其实解决方法很简单，只需要几行代码。

认识

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

检查网页的源代码，可以发现html的这个地方有一个疑似类，叫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样式，可以把整个网站变成一个灰色的效果。

分析

所以我们来详细了解一下这是一种什么样的CSS样式。

这种风格叫做滤镜。搜索MDN的官方介绍，其链接是:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter.

官方介绍如下:

滤镜CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

CSS标准包含一些已经达到预定义效果的函数。您也可以引用一个SVG过滤器，并通过URL链接到SVG过滤器元素(SVG过滤器元素[1])。

其实就是一个滤镜的意思。

官方有一个Demo，可以看到效果，如图。

演示

比如这里，图片、颜色、模糊、对比度等信息是通过滤镜样式改变的。

所有使用示例如下:

/* URL to SVG filter */ filter:url("filters.svg#filter-id");

/* & lt；过滤器-功能>;values */filter:blur(5px)；滤镜:亮度(0.4)；滤镜:对比度(200%)；滤镜:投影(16px 16 px 20 pxblue)；滤镜:灰度(50%)；滤镜:色调旋转(90度)；过滤器:倒置(75%)；滤镜:不透明度(25%)；过滤器:饱和(30%)；过滤器:棕褐色(60%)；

/*多重滤镜*/滤镜:对比度(175%)亮度(3%)；

/*全局值*/筛选器:继承；filter:initial；过滤器:取消设置；

对于每个用法介绍，你可以参考官方文件:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

例如，如果我们可以在这里使用模糊来设置高斯模糊，用法如下:

filter:blur(radius)

为图像设置高斯模糊。一个半径的值设置高斯函数的标准差，或者说屏幕上融合了多少像素，所以值越大越模糊；如果没有设定值，默认值为0；此参数可以设置绝对像素值，但不接受百分比值。

这种效果可以实现:

影响

回到刚才的灰度图像，这里其实是设置了灰度的，其用法如下:

filter:grayscale(percent)

将图像转换为灰度图像。该值定义了转换的比例。如果百分比值为100%，则完全转换为灰度图像，如果值为0%，则图像不变。0%到100%之间的值是效果的线性乘数。如果未设置，默认值为0。除了传递百分比，还可以传递浮点数，效果一样。

例如:

filter:grayscale(1)filter:grayscale(100%)

所有节点都可以转换成100%灰度模式。

所以这里一切都清楚了。如果要把整个站变成灰色，考虑每个浏览器的兼容写法，可以参考CSDN的写法:

.gray {-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);}

这样，想要灰显的节点只需要添加类灰即可。例如，如果它们被添加到html节点，整个站可以变灰。

最后，看看浏览器与过滤器样式的兼容性，如图所示:

和睦相处

这里可以看到除了IE，PC和手机上的其他浏览器都支持，Firefox的PC和Android也分别支持SVG图像，可以放心使用。

总结

本文简要介绍了今天观察到的网站灰度化的实现，并学习了过滤器的更详细的用法，希望有所帮助。

引用

[1] SVG过滤元素:https://developer . Mozilla . org/en-US/docs/Web/SVG/Element/filter

见证历史！1071万考生高考延期30天意味着什么？