一行 CSS 代码实现整个网站网页变黑白灰的效果

已关闭留言

明天全国哀悼为抗击新冠肺炎疫情斗争牺牲烈士和逝世通报。如果你也是站长，想做点什么，那么可以把网站编程黑白以示哀悼。下面分享一下一行代码实现整个网站网页编程黑白灰色的效果，主要是通过修改 CSS 的方式实现的。

文章目录
隐藏
一、实现网站黑白灰效果的代码
二、全国性哀悼活动

一、实现网站黑白灰效果的代码

以下代码其实合并在一行就可以，所以标题的一行代码并没有什么问题。但是下面代码分成多行，为了方便大家阅读和理解。

<style type="text/css">
    html {
        filter: grayscale(100%); 
        -webkit-filter: grayscale(100%); 
        -moz-filter: grayscale(100%); 
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%); 
        -webkit-filter: grayscale(1);
    }
</style>

把代码加在网站的 CSS 文件或者 <head></head> 之间任意部分即可。

代码释义：filter 是滤镜的意思，filter:gray 的意思就是说给页面加上一个灰度的滤镜，所以 html 里面的所有内容都会变成黑白的了。不过这个滤镜对于 Chrome 和 Safari 浏览器是无效的，所以下面会有一行 -webkit-filter: grayscale(100%); 这个样式是专属于使用 webkit 内核的浏览器的，意思和 filter: gray; 差不多，只是写法不同罢了。

参考：https://blog.csdn.net/dianxu0804/article/details/101241839

二、全国性哀悼活动

原文：

新华社北京4月3日电 为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院今天发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。

链接：http://www.xinhuanet.com/politics/2020-04/03/c_1125807657.htm