哀悼日很多网站都变成了灰色,这是怎么做到的?

哀悼日打开各个网站,发现网页都变成灰色了。今年国家经历了非常惨痛的时刻,有很多烈士英雄保卫人民的安危遇难,昨天全国下降半旗,北京时间 10 点全国默哀三分钟,来致敬英雄们。为了深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞,4月4日0点起,

全国多家网站和移动端,比如百度、优酷、爱奇艺、哔哩哔哩、抖音、快手、斗鱼和CSDN等平台给出公告称:2020年4月4日全国性哀悼活动期间,停止今天一切公共娱乐活动。

哀悼日很多网站都变成了灰色,这是怎么做到的?

随便打开这些任何一个网站,全站的内容都变成了灰色,包括按钮、图片等等。相信这时候从事程序开发的粉丝可能会好奇这是怎么做到的呢?

哀悼日很多网站都变成了灰色,这是怎么做到的?

其实解决方案很简单,只需要几行代码就能搞定了。从事前端开发的朋友会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。如下图,有一个灰色样式:[filter: grayscale(100%);],也许就是这一个样式控制着整个网页显示效果。

哀悼日很多网站都变成了灰色,这是怎么做到的?

现在试着关掉这个样式,会发现整个csdn页面恢复了往常的红色主题,包括网站logo、图片和按钮都恢复了。

哀悼日很多网站都变成了灰色,这是怎么做到的?

总结上面的实验效果,果然是这个样式在起作用,而且是全局的效果,因为它是作用在了 html 这个节点之上的。只要修改这部分CSS代码:

哀悼日很多网站都变成了灰色,这是怎么做到的?



分享到:


相關文章: