為表達全國各族人民對抗擊新冠肺炎疫情斗爭犧牲烈士和逝世同胞的深切哀悼，國務院今天發布公告，決定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

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

總結

以上是生活随笔為你收集整理的清明节网站变灰是如何实现的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。