昨天是年4月4日，星期六，清明节。
我们的国家经历了非常惨痛的时刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难，全国下降半旗，默哀三分钟，来致敬英雄们。同时一切公共娱乐活动也都会停止，包括直播、综艺、影视、游戏等等。
我也在这里也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼，向所有在抗战在疫情前线的工作和医护人员致敬。我们每一个人的平安面前，都是英雄的人墙。
网站变灰昨天大家可以看到很多很多网站包括主页和内容也都已经变成了灰色，比如百度、B站、爱奇艺、CSDN等等。
CSDN爱奇艺百度大家可以看到全站的内容都变成灰色了，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？
有人会以为所有的内容都统一换了一个CSS样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。
其实，解决方案很简单，只需要几行代码就能搞定了。
实现我们选择一个网站，比如B站吧，打开浏览器开发者工具。
审查一下网页的源代码，我们可以发现在html的这个地方多了一个疑似的class，叫做gray，gray中文即灰色。
变灰效果可以看到，我们只要将下面这行CSS样式，加入到页面指定节点，即可实现网页变灰的效果：
-webkit-filter:grayscale(.95);
其完整内容为：
html.gray{-webkit-filter:grayscale(.95);}
我们将其取消，就能发现网站的颜色就能重新还原回来了。
还原效果果然是这个样式在起作用，而且是全局的效果，因为它是作用在了html这个节点之上的。
另外看看CSDN，它也是用的这个CSS样式，其内容为：
html{-webkit-filter:grayscale(%);-moz-filter:grayscale(%);-ms-filter:grayscale(%);-o-filter:grayscale(%);filter:grayscale(%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
这个实现看起来兼容性会更好一些。
因此我们可以确定，通过一个全局的CSS样式就能将整个网站变成灰色效果。
分析那么这里我们就来详细了解一下这究竟是一个什么样的CSS样式。
这个样式名叫做filter，搜下MDN的官方介绍，其链接为：