清明節網站變灰是如何實現的

爲表達全國各族人民對抗擊新冠肺炎疫情鬥爭犧牲烈士和逝世同胞的深切哀悼，國務院今天發佈公告，決定2020年4月4日舉行全國性哀悼活動。在此期間，全國和駐外使領館下半旗誌哀，全國停止公共娛樂活動。4月4日10時起，全國人民默哀3分鐘，汽車、火車、艦船鳴笛，防空警報鳴響。

各大網站響應國家號召，將頁面色調變爲了灰色。作爲一個技術仔，特別是前端技術仔必須一探究竟。

取證

圖片本身依然是彩色，但呈現是灰色，可判斷爲渲染導致的。通過審查元素，在當前元素上並沒有發現特別的設置；於是一層層向上查找，最終在 html 上發現了 filter

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    /* filter: grayscale(100%); */
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

結論

filter 將模糊或顏色偏移等圖形效果應用於元素。通常用於調整圖像，背景和邊框的渲染。

CSS標準裏包含了一些已實現預定義效果的函數。具體細則大家可查閱 mdn。

其中，grayscale(amount) 對圖片進行灰度轉換, 它是 filter-function 的子屬性.

• amount：轉換值的大小，可以是number 或 percentage。 當值爲100%時， 灰度最大。 0%時與原圖沒有區別。 0% 到 100% 之間的值會使灰度線性變化。amount 爲空時會自動插入0。

<img style="filter: grayscale(0)" src="./super前端.png">
<img style="filter: grayscale(0.5)" src="./super前端.png">
<img style="filter: grayscale(1)" src="./super前端.png">

百度、頭條等網站均採用上述方式！

兼容性

相關地址

• https://ligang.blog.csdn.net/
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale

冬將盡，春可期，山河無恙，人間皆安