網頁顏色可以變，致敬抗疫英雄態度不能變（如何使用 CSS3 使網頁顏色整體變色）
引入篇
2020年4月4日 星期六 清明節
爲表達全國各族人民對抗擊新冠肺炎疫情鬥爭犧牲烈士和逝世同胞的深切哀悼，國務院決定，2020年4月4日舉行全國性哀悼活動。在此期間，全國和駐外領事館下半旗誌哀，全國停止公共娛樂活動。4月4日10時起，全國人民默哀3分鐘，汽車、火車、艦船鳴笛，防空警報鳴響。與此同時，大家可以發現所有的網頁全部變成了灰色。那麼這是怎麼來實現的呢？接下來我將帶大家get這個效果。
技術篇
以CSDN網站爲例
2020年4月4日我們看到網頁全部內容都變成了灰色，有人認爲所有的內容的統一更換了CSS樣式，圖片也全換成了黑白的圖片，實則不然，這樣做的人工成本太大了，整個網站中有很多個網頁，每個網頁有很多張圖片，而且萬一某一個部分的內容前端工程師們忘記添加灰色樣式，可能會使整個網頁看起啦很突兀。接下來我們來看一下究竟是如何實現的。
首先，打開瀏覽器，選擇一個網站打開，（以下以CSDN爲例），在CSDN網站上鼠標點擊右鍵選擇 檢查元素 可以查找到該網頁的源代碼，互聯網大廠的編寫代碼一般都是結構樣式相分離，也就是HTML寫結構，css寫樣式，那麼我們應該看一下 style部分中關於顏色方面多出了些什麼東西。
從下圖可以看到：
僅僅一行代碼使整個網頁全部變成了灰色。
html{-webkit-filter: grayscale(100%);}
那麼這行代碼是什麼意思呢？
- html{} 代表了選擇整個頁面，在{}內寫的代碼可以使整個頁碼的樣式全部應用。例如：
html{color:blue}可以讓整個頁面中的字體顏色全都變成藍色。 - webkit是主流瀏覽器其中一種瀏覽器內核，主要應用於Mozilla Firefox、Safari、GoogleChrome 等這類瀏覽器，考慮瀏覽器兼容性的問題，故加上此使內容可以在Mozilla Firefox、Safari、GoogleChrome 等這類瀏覽器中顯示。
- filter:grayscale(100%) 是什麼意思呢，這是本篇文章重點講述的內容
filter（濾鏡）[部分內容引自於菜鳥教程]
filter是 CSS3 中的一種樣式
CSS屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡用於通常用於調整圖像、背景、邊框的渲染。它類似於修圖軟件中的濾鏡，修圖軟件中的濾鏡可以改變圖片的整體效果，修改過圖片的你們可能就明白了濾鏡的效果。CSS3的filter可以使整個網頁的樣式效果改變。
瀏覽器支持
注：舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標準 “filter” 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性。
網頁中使用的grayscale(%) ： 將圖像轉換爲灰度圖像。值定義轉換的比例。值爲100%則完全轉爲灰度圖像，值爲0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；
那麼將網頁中的
html{-webkit-filter: grayscale(100%);}
去掉可以在你的電腦上看到網頁日常的模樣（刷新後會恢復到網站原有的灰色狀態）。如下圖：
filter的其他功能（以下寫法爲了簡易忽略了瀏覽器兼容性，使用任何css3記得考慮瀏覽器兼容性即在filter前寫上支持的主流瀏覽器內核哦！！）：
- blur(px) ：給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；例如：
img{filter：blur（2px）；}圖片使用高斯模糊效果。 - brightness(%) ：給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是1。例如：
img{filter：brightnes（200%）；}使圖片變亮 - drop-shadow(h-shadow v-shadow blur spread color) ：給圖像設置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數接受(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似；不同之處在於，通過濾鏡，一些瀏覽器爲了更好的性能會提供硬件加速。參數如下：
(必須)
這是設置陰影偏移量的兩個 值. 設定水平方向距離. 負值會使陰影出現在元素左邊. 設定垂直距離.負值會使陰影出現在元素上方。查看可能的單位.
如果兩個值都是0, 則陰影出現在元素正後面 (如果設置了 and/or ，會有模糊效果).
(可選)
這是第三個code>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，默認是0 (則陰影的邊界很銳利).
(可選)
這是第四個 值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素一樣大小).
注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。
(可選)
查看 該值可能的關鍵字和標記。若未設定，顏色值基於瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。例如：img { filter: drop-shadow(8px 8px 10px red);; }給圖像設置一個陰影效果。
瞭解更多關於 filter 的功能 ，讀者可以在菜鳥教程中查看。
鏈接：https://www.runoob.com/cssref/css3-pr-filter.html
結語
本文帶大家簡單瞭解了觀察到的網頁整體變成灰色是如何在技術上實現的，也帶大家簡要了解 filter及其它的其他的幾個功能。
最後，在此向所有奮戰在抗擊疫情一線的人們致敬！向抗擊疫情鬥爭犧牲的烈士和同胞表示深切的哀悼！世界並不是一切安好，只是有人替你負重前行。
（初次寫技術類博客，如有不當還請大佬們多多指教和諒解。）