网页一半是灰色的

什么颜色变灰色（网页变灰）

网页变灰(什么颜色变灰)

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

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

向在全国抗击新冠肺炎疫情斗争中牺牲的烈士和同胞表示深切的哀悼，向在抗日战争中工作在疫情一线的全体工人和医务人员表示敬意。我们每个人都是和平面前的英雄墙。

网站灰色化

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

爱奇艺

哔哩哔哩

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

大家可以看到，整个站的内容都变成了灰色，包括按钮，图片等等。这个时候，我们可能会奇怪这是怎么做到的。

有些人会认为内容全部换成CSS样式，图片全部换成灰色，按钮等样式也换成灰色样式。但是想想，成本太高了，而且一个控件忘了加灰色样式岂不是太突兀了？

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

实现

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

考察网页的源代码，可以发现html的这一部分有一个疑似类，叫做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.

官方介绍如下:

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

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

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

有官方演示，可以看到效果，如图。

演示

比如图片、颜色、模糊、对比度等信息。由过滤器样式更改。

其用法的所有示例如下:

/* URL to SVG filter */filter: url(quot;filters.svg#filter-idquot;);/* lt;filter-functiongt; values */filter: blur(5px);filter: brightness(0.4);filter: contrast(200%);filter: drop-shadow(16px 16px 20px blue);filter: grayscale(50%);filter: hue-rotate(90deg);filter: invert(75%);filter: opacity(25%);filter: saturate(30%);filter: sepia(60%);/* Multiple filters */filter: contrast(175%) brightness(3%);/* Global values */filter: inherit;filter: initial;filter: unset;

请参考官方文档:
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);}

这样，想要变灰的节点只需要添加gray类即可。比如你把它加到html节点上，整个站就可以变灰了。

最后看一下浏览器对滤镜风格的兼容性，如图:

和睦相处

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

总结:本文简单介绍了今天观察到的网站灰化的实现，也了解到了滤镜更详细的用法，希望能有所帮助。