2020年4月4日，几乎所有主流媒体的线上网站网易、搜狐、百度等的配色方案统一切换为灰色，比以往多了一分肃穆，往日的清明节只是一个不痛不痒的三日假期而已，而今年的清明注定不同，原因有三：一是临近清明这一传统哀思、祭奠先辈的节日。二是为国家事业牺牲的先烈，包括近期西昌救火及因新冠病毒牺牲的英雄们表示致敬。三是灰色给人稳重安定感，灰色是我们因哀思的一种沉积，更是蕴意着我们沉积过后，秉承先烈意志的一种奋发有为。
当然了，也有的人认为这不过是一种形式主义，形式大于内容，如果不切换为灰色滤镜配色，也并不代表内心没有寄托哀思，其实呢，人生是需要仪式感的，人之以所以能为人，就是人类是有情感，智力，会制造和使用工具来满足的物质精神文化需求，不管任何事物，对人类来说都需要对应相应的情感。网络、APP，各种高科技数码人工智能也一样。新中国成立到现在，中国经历很多改变历史的大事件，抗美援朝、三年自然灾害、两弹一星、唐山大地震、改革开放、香港澳门回归、全世界的经济危机、03年的SARS、08汶川大地震(512)、08年奥运会、2020年的冠状病毒疫情，在这些重大历史事件中英雄的中国人民众志成城，共同进退，也涌现出许多不怕牺牲敢于奉献的烈士、英雄、先驱等等，他们值得我们世世代代去纪念缅怀，根本没有什么所谓的岁月静好，不过是有许多我们认识或不认识的陌生人替我们负重前行。
所以归根结底，仪式感和形式主义的最大区别是自我认同。
因为很多人把哀悼日将网站切换灰色滤镜当成一种规则，他们认同这个规则。他们不只是在生活中言行得体为了给别人留下好印象，他们在平常的开发过程中，对客户，对客服，对网民都要言行得体。如果你把一种行为当成人生的行为准则或道德约束，仪式感就来了。
那么具体怎么操作呢，首先可以使用css滤镜：
代码语言：javascript复制html {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}CSS filter（滤镜） 曾经是 Internet Explorer 专有的 CSS 属性，如今，filter 属性已成为 CSS3 规范的一部分，并且大部分主流浏览器（如 Firefox，Chrome 和 Safari ）都支持
如果你的页面不方便添加额外的css语法，或者你的css文件经过webpack，gulp这样的压缩库进行过压缩，那么可以考虑使用javascript脚本
代码语言：javascript复制var imgObj = document.getElementsByClassName('img');
function gray(imgObj) {
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var imgW = imgObj.width;
var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(var y = 0; y < imgPixels.height; y ){
for(var x = 0; x < imgPixels.width; x ){
var i = (y * 4) * imgPixels.width x * 4;
var avg = (imgPixels.data[i] imgPixels.data[i 1] imgPixels.data[i 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i 1] = avg;
imgPixels.data[i 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
imgObj.src = gray(imgObj);一般情况下，使用js脚本可以更好的兼容浏览器。
最后，还可以使用svg滤镜，关于svg，在之前的一篇文章:Iconfont(矢量图标) iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统中，有过涉及，大概的基本原理就是在不影响任何文档结构的前提下，允许你给你的矢量图形添加各种专业视觉效果，我个人认为它的方便之处就在于，好像把PhotoShop直接装到了网页上。
代码语言：javascript复制html {
filter: url(data:image/svg xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter i…0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}当然了，如果你不想自己来写代码，感觉过于麻烦，也可以依托第三方控件来达成灰色滤镜的效果，比如业界鼎鼎有名的 grayscale.js，只需要引入它的js文件库
代码语言：javascript复制<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>通过元素选择器也可以完成效果
代码语言：javascript复制//原生js
grayscale(document.getElementsByTagName("body"));
//也可以用jquery
grayscale($("body"));
