如何一键灰白，以示哀思

2020年4月4日

是农历庚子年的清明节

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

小记

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

• 4日零点，各大游戏停服维护，各个公司主页应用改为黑白主题。
• 4日10时全国降半旗鸣笛默哀，表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼。

这也许是人生中第一次全网上下，身前身后都是一片灰色沉痛的基调。百度、腾讯新闻、今日头条、人民日报、淘宝等等你所能用到的app/官网，都将页面色调转为黑白，以示哀思。他们是怎么做到一夜之间将如此大体量的网页做了主题切换的呢？难道他们早就接到了通知？

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

`
filter: grayscale(100%)
`

这是一行css3的样式代码，意为将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

有了核心代码，再稍加修饰，让其兼容多版本浏览器

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 */
}

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

参考资料：

• MDN grayscale()
• 程序员黑叔

终言

我们这代人虽然可能不曾亲历03年非典，但是今时今日，从一方有难八方驰援，再到一省一国的国际援助。我们为奋战在一线的医护人员揪心，为不听从劝阻的人闹心，为尸位素餐的人糟心，为逝去的亲朋好友伤心，为平安归来的勇士们开心。这些都是历史，多难之所以兴邦是因为我们能够铭记历史，以期不使后人而复哀后人也。