公祭日网站变灰白色效果

四天前 · 星期六 · 清明节
2020年，一个很不平凡的年度。鼠疫、新型冠状病毒肺炎和就在清明节前夕的西昌山火。在这一段时间里我国经历很多惨痛的时刻，很多英雄“逆向而行”去到了最危险的前线保护人民群众生命财产的安全！更有很多英雄在保护救助人民的途中倒下了、遇难了！就在这个庄严肃穆的时刻（2020.04.04—清明节）我国全国降下半旗，也在北京时间AM10:00行人驻足、汽车鸣笛全国默哀三分钟，来向这些”逆行者“——英雄们致敬。在四月四日这一天所有提供公共娱乐活动的场所和互联网线上娱乐平台也都停服一天。
在此我也深切的向全国在抗击新型冠状病毒肺炎疫情阻击战中牺牲的烈士和不幸逝世的同胞们表达哀悼；同时也向抗疫前线的的工作和医护人员以及火雷二院的建造者们表达崇高的致意！！！在此也祝愿各位平安、幸福、安康！
在清明节的这一天大家看到很多网站主页甚至是内容页已经变成了灰白色调了，比如百度、爱奇艺和咱们使用的csdn等等。

百度

爱奇艺

CSDN

大家看到了全站或者是网站首页的所有内容都变成了灰白色了，这时候就会有好多好奇宝宝“小明”出现了，这是怎么做到的呢？是做了俩套不同样式的页面吗亦或是在关键时刻重写了CSS 样式了吗？错错错这些想法都不对，真要是这样那成本就太高了，再说了如果在改写样式的过程中有某一疏漏这样就太突兀了，给网民用户也带来了一些不好的体验；

其实解决方案很简单，只需要短短几行代码就解决了。

笔者本人在清明节前夕负责的一些网站项目也都要在清明节当天零点全部站点的首页统一变成灰白色的，经过一些查阅本人自己使用的代码是：

<style>html{filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);filter: gray;}body{background: none;}
</style>

添加了以上代码网站就可以变成达到预想的比较肃穆的效果了，有人会问为什么要给body去掉背景呢，因为笔者自己的项目实际中有好一些都使用body的大背景图如果不去掉的背景图片的话添加在body上的背景图还是彩色的所有就有了笔者的body去掉背景图片的操作了。我们将其取消发现网站页面立马又变回的昔日的风采了。
在清明节当天笔者查看了一些其他网站的实现方案，思路基本相同，就是根据自己的不同的浏览器兼容需求略微做一些调整即可。

哔哩哔哩是通过在HTML的节点上定义了一个class来实现的

<!-- CSDN的变色代码 -->
html{filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);
}

CSDN的代码兼容性会更好一些

综上所述我们可以通过一个全局的CSS样式使整个网站编程灰白色的。