如何一键灰白,以示哀思

本文最后更新于:2020年4月4日 晚上

2020年4月4日

是农历庚子年的清明节

同样也是2000年以来的第四个全国追悼日

小记

2020年4月3日,国务院公告:2020年4月4日举行全国性哀悼活动。

4日零点,各大游戏停服维护,各个公司主页应用改为黑白主题。
4日10时全国降半旗鸣笛默哀,表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼。
这也许是人生中第一次全网上下,身前身后都是一片灰色沉痛的基调。百度、腾讯新闻、今日头条、人民日报、淘宝等等你所能用到的app/官网,都将页面色调转为黑白,以示哀思。他们是怎么做到一夜之间将如此大体量的网页做了主题切换的呢?难道他们早就接到了通知?

其实不然,做到这些关键代码只有一行,其次再考虑下各浏览器版本兼容的问题就可以轻松做到:

1
filter: grayscale(100%)

这是一行css3的样式代码,意为将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
有了核心代码,再稍加修饰,让其兼容多版本浏览器

1
2
3
4
5
6
7
8
9
10
html { 
filter: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg>#grayscale"); /* Firefox 3.5+ */
-webkit-filter: grayscale(100%); /* chrome+ */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* ie6-8 */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*ie6-9 */
}

此段样式代码只需声明为全局样式,其样式文件在页面头部引入,即可生效。如有需要请自行食用。