简单实现网站灰色效果以谨记2020年4月4日悼念日

一 2020年4月4日悼念日——星期六——清明节

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外领事馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。于此同时，很多网站全部变成了灰色，以响应党的号召，进行特殊形式的默哀。出于对技术的好奇，就简单的实现了一下该功能。

二 个人仿站原网页显示

三 个人仿站原网页仅图片灰色显示

由图所示只有图片变成灰色，实际上之只要在相应的CSS样式文件中加下列代码即可：

/*支持的浏览器 Chrome, Safari, Opera*/
img{
    /*90%也可以写成小数形式0.9*/
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); 
}

三 个人仿站整网页灰色显示

由图所示全网页都变成灰色，实际上之只要在相应的CSS样式文件中加下列代码即可：

/*支持的浏览器 Chrome, Safari, Opera*/
*{
    /*90%也可以写成小数形式0.9*/
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%);
}
或者
body{
    /*90%也可以写成小数形式0.9*/
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%);
}

参考资料：CSS filter滤镜属性