清明节致敬英雄们，你准备好了吗？

我们的国家经历了一个非常悲惨的时刻。 许多英雄在救人途中倒下，许多烈士英雄为了保卫人民的安全而牺牲。 今天，北京时间10点，全国下半旗志哀，默哀三分钟，向英雄们致敬。 同时，今天也将暂停一切公共娱乐活动，包括直播、综艺、影视、游戏等。

我也在这里向全国抗击新冠病毒斗争中牺牲的烈士和同胞表示深切的哀悼，向所有奋战在抗击疫情一线的工人和医务人员致以崇高的敬意。 在我们每个人的和平面前，都是英雄的人墙。

网站变成灰色

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

CSDN

爱奇艺

百度

可以看到网站上的所有内容都变成了灰色，包括按钮、图片等，这时候我们可能会想这是怎么做到的呢？

有人会认为所有内容都统一改成了CSS样式，所有图片都改成了灰色，按钮等样式也都改成了灰色。 但仔细想想，成本太高了，如果某个控件忘记加灰色样式，那就太唐突了。

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

完成

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

检查网页源代码，我们可以发现html中有一个可疑的类，叫做gray，中文意思是灰色。

灰化效果

可以看到，我们只需要在页面的指定节点添加下面这行CSS样式就可以实现网页变灰的效果：

-webkit-filter: grayscale(.95);

其完整内容为：

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官方介绍，链接是：。

官方介绍如下：

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

CSS 标准包括实现预定义效果的函数。 您还可以通过 URL 链接到 SVG 过滤器元素 (SVG [1]) 来引用 SVG 过滤器。

其实就是过滤器的意思。

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

演示

例如，图像、颜色、模糊、对比度等信息在这里通过样式进行改变。

全部使用示例如下：

/* URL to SVG filter */filter: url("filters.svg#filter-id");
/*  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;

各个使用介绍可以参考官方文档：

比如我们这里可以使用blur来设置高斯模糊，用法如下：

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和手机浏览器都支持。 PC和浏览器也分别支持SVG图像，您可以放心使用。

总结

本文简单介绍了今天观察到的变灰网站的实现，也了解了更详细的使用方法。 我希望这会有所帮助。

[1]SVG：

最后跟大家分享今天读到的一段让我感触很深的文字：

如果后人书写今天的历史，他们会发现没有任何言语可以描述这场灾难的残酷，没有任何语言和修辞可以描述人类为生存所做的艰辛努力。

我们将扛着火种穿过黑夜，踏过战友的遗骸，踏过荆棘和深渊，最终在白骨堆上重新点燃种族延续的火炬。

我知道你不需要历史来记录你的成就，也不需要那些空洞华丽的赞美。

山川河流，亿万英雄魂，见证了我们的一路前行，见证了我们永不放弃的努力。 ”

——尊重普通人

最近面试BAT，整理了一本面试材料《Java面试BAT通关手册》，内容涵盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等。