2020 年 4 月 4 日，星期六，清明节。
我们的国家经历了非常惨痛的时刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难，今天全国下降半旗，北京时间 10 点全国默哀三分钟，来致敬英雄们。同时今天一切公共娱乐活动也都会停止，包括直播、综艺、影视、游戏等等。
对人们而言，刚刚过去的这个冬天，似乎格外漫长。突如其来的新冠肺炎疫情，让中国社会与公众的生活进入了暂停状态。壮士断腕般的“封城”举措，“全国一盘棋”式的公共卫生动员，加上史无前例的大规模隔离行动，让我们带着与病毒抗争到底的决心，度过了一段艰难时光。在这次战争中，最让我们感动的是我们的白衣天使，她们扇起了他的翅膀，在一线挥洒着汗水，与病毒对抗。
她们有的是父母的唯一孩子，有的是刚新婚的丈夫(妻子)，有的是孩子的父亲(母亲)。她们在这个社会上扮演着各种各样的角色，她们在新年团圆之际，放弃了与家人的的团聚，留在了一线抗战。当然，还有我们很多不知道名字的警察，兵哥哥，为我们默默付出着，还有各种各样的社会人士在大街上发口罩，坚守防疫岗位的工作者们。
我们每一个人的平安面前，都是英雄的人墙。
###网站变灰
哀悼日打开各个网站，发现网页都变成灰色了。
大家可以看到全站的内容都变成灰色了，包括按钮、图片等等。
这时候我们可能会好奇这是怎么做到的呢？
有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。
其实，解决方案很简单，只需要几行代码就能搞定了。
从事前端开发的朋友会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。
如下图，有一个灰色样式：[filter: grayscale(100%);]，也许就是这一个样式控制着整个网页显示效果。
实现
我们选择一个网站，比如 B 站吧，打开浏览器开发者工具。
审查一下网页的源代码，我们可以发现在 html 的这个地方多了一个疑似的 class，叫做 gray，gray 中文即灰色。
其 CSS 内容为：
html.gray {
我们将其取消，就能发现网站的颜色就能重新还原回来了。
果然是这个样式在起作用，而且是全局的效果，因为它是作用在了 html 这个节点之上的。
另外看看 CSDN，它也是用的这个 CSS 样式，其内容为：
html {
这个实现看起来兼容性会更好一些。
因此我们可以确定，通过一个全局的 CSS 样式就能将整个网站变成灰色效果。
当然这种修改CSS的方式还有很多，我们可以在Mozilla发布的样式效果测试平台上看看 filter 这种不同层叠样式效果。
平台地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
通过这几个用力可见通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。官网介绍了一些语法：
设置一种函数，方法如下：
除了这些开发样式调整的方法以外，还可以走系统架构角度解决网页的显示问题，通常很多大型网站都用上了反向代理nginx服务器，所有网站访问，都要通过nginx代理去访问到网页内容。
既然这样，统一在nginx服务器上做一些配置也是可行的，之前某大神的博客说“在Nginx负载均衡服务器上，利用sub_filter指令在输出的HTML中增加一行如下代码：
<style type="text/css">
html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
<style>
nginx配置修改效果如下：
分析
那么这里我们就来详细了解一下这究竟是一个什么样的 CSS 样式。
这个样式名叫做 filter，官方介绍内容如下：
filterCSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜，通过一个 URL 链接到 SVG 滤镜元素 (SVG filter element[1])。
其实就是一个滤镜的意思。
官方有一个 Demo，可以看下效果，如图所示。
比如这里通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。
其所有用法示例如下：
/* URL to SVG filter */
比如这里如果我们可以使用 blur 设置高斯模糊，用法如下：
filter: blur(radius)
给图像设置高斯模糊。radius 一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是 0；这个参数可设置绝对像素值，但不接受百分比值。
可以达成这样的效果：
再说回刚才的灰色图像，这里其实就是设置了 grayscale，其用法如下：
filter: grayscale(percent)
将图像转换为灰度图像。值定义转换的比例。percent 值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘子。若未设置，值默认是 0。另外除了传递百分比，还可以传递浮点数，效果是一样的。
如：
filter: grayscale(1)
都可以将节点转化为 100% 的灰度模式。
所以一切到这里就清楚了，如果我们想要把全站变成灰色，再考虑到各浏览器兼容写法，可以参考下 CSDN 的写法：
.gray {
这样想要变灰的节点只需要加上 gray 这个 class 就好了，比如加到 html 节点上就可以全站变灰了。
最后呢，看一下浏览器对 filter 这个样式的兼容性怎样，如图所示：
这里我们看到，这里除了 IE，其他的 PC、手机端的浏览器都支持了，Firefox 的 PC、安卓端还单独对 SVG 图像加了支持，可以放心使用。
