原文轉(zhuǎn)載自「劉悅的技術(shù)博客」https://v3u.cn/a_id_145
2020年4月4日，幾乎所有主流媒體的線上網(wǎng)站網(wǎng)易、搜狐、百度等的配色方案統(tǒng)一切換為灰色，比以往多了一分肅穆，往日的清明節(jié)只是一個不痛不癢的三日假期而已，而今年的清明注定不同，原因有三：一是臨近清明這一傳統(tǒng)哀思、祭奠先輩的節(jié)日。二是為國家事業(yè)犧牲的先烈，包括近期西昌救火及因新冠病毒犧牲的英雄們表示致敬。三是灰色給人穩(wěn)重安定感，灰色是我們因哀思的一種沉積，更是蘊意著我們沉積過后，秉承先烈意志的一種奮發(fā)有為。
當然了，也有的人認為這不過是一種形式主義，形式大于內(nèi)容，如果不切換為灰色濾鏡配色，也并不代表內(nèi)心沒有寄托哀思，其實呢，人生是需要儀式感的，人之以所以能為人，就是人類是有情感，智力，會制造和使用工具來滿足的物質(zhì)精神文化需求，不管任何事物，對人類來說都需要對應相應的情感。網(wǎng)絡、APP，各種高科技數(shù)碼人工智能也一樣。新中國成立到現(xiàn)在，中國經(jīng)歷很多改變歷史的大事件，抗美援朝、三年自然災害、兩彈一星、唐山大地震、改革開放、香港澳門回歸、全世界的經(jīng)濟危機、03年的SARS、08汶川大地震(512)、08年奧運會、2020年的冠狀病毒疫情，在這些重大歷史事件中英雄的中國人民眾志成城，共同進退，也涌現(xiàn)出許多不怕犧牲敢于奉獻的烈士、英雄、先驅(qū)等等，他們值得我們世世代代去紀念緬懷，根本沒有什么所謂的歲月靜好，不過是有許多我們認識或不認識的陌生人替我們負重前行。
所以歸根結(jié)底，儀式感和形式主義的最大區(qū)別是自我認同。
因為很多人把哀悼日將網(wǎng)站切換灰色濾鏡當成一種規(guī)則，他們認同這個規(guī)則。他們不只是在生活中言行得體為了給別人留下好印象，他們在平常的開發(fā)過程中，對客戶，對客服，對網(wǎng)民都要言行得體。如果你把一種行為當成人生的行為準則或道德約束，儀式感就來了。
那么具體怎么操作呢，首先可以使用css濾鏡：
html {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
CSS filter（濾鏡） 曾經(jīng)是 Internet Explorer 專有的 CSS 屬性，如今，filter 屬性已成為 CSS3 規(guī)范的一部分，并且大部分主流瀏覽器（如 Firefox，Chrome 和 Safari ）都支持
如果你的頁面不方便添加額外的css語法，或者你的css文件經(jīng)過webpack，gulp這樣的壓縮庫進行過壓縮，那么可以考慮使用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濾鏡，關(guān)于svg，在之前的一篇文章:Iconfont(矢量圖標)+iconmoon(圖標svg互轉(zhuǎn))配合javascript來打造屬于自己的個性化社交分享系統(tǒng)中，有過涉及，大概的基本原理就是在不影響任何文檔結(jié)構(gòu)的前提下，允許你給你的矢量圖形添加各種專業(yè)視覺效果，我個人認為它的方便之處就在于，好像把PhotoShop直接裝到了網(wǎng)頁上。
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);
}
當然了，如果你不想自己來寫代碼，感覺過于麻煩，也可以依托第三方控件來達成灰色濾鏡的效果，比如業(yè)界鼎鼎有名的 grayscale.js，只需要引入它的js文件庫
<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>
通過元素選擇器也可以完成效果
//原生js
grayscale(document.getElementsByTagName("body"));
//也可以用jquery
grayscale($("body"));
原文轉(zhuǎn)載自「劉悅的技術(shù)博客」 https://v3u.cn/a_id_145
