今天是4月4日，舉行全國性哀悼活動，致敬英雄,共悼逝者。很多網站都已經將自家的網站色調變成黑色以緬懷英雄，
我也在這裏向全國抗擊新冠肺炎疫情鬥爭中犧牲的烈士和逝世的同胞表達深切的哀悼,向所有抗戰在疫情前線的工作和醫護人員致敬!
而這裏我們學習一下怎麼實現網站色調變黑吧。只需要一條語句就夠了，在CSS中設置html樣式，如下所示
html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
如下，應用的一個小例子：
但這種方式對於我們日常寫的網頁文件來說，倒是很實用，但對於大公司來說，如果要將所有的網頁都變灰，這個成本將會很大，因爲那麼多網站全需要添加樣式，所以一定有其他辦法讓網站變灰，我們現在來看下是如何實現的
bilibili
打開b站主頁，我們可以看到所以都變灰了，我們用F12檢查源代碼，如圖所示
如下圖，我們可以看到，這裏設置了html.gray,而gray就是灰色的意思
所以我們試一下,將這個按鈕取消掉,如下圖所示,B站就變成原來的顏色了,果然是這個樣式在起作用,而且是全局效果,因爲他是作用在了html這個節點之上.
CSDN
再看一下CSDN
他也是用這個樣式
我們也將這個按鈕取消掉,
由此我們可以知道,通過一個全局的CSS樣式就能將整個網站變成灰色效果.
思考
一開始我也以爲是直接用開頭那條語句實現,但現在發現並不是,這裏我們就詳細瞭解下這是怎樣的CSS樣式
這個樣式名叫作filter,這裏點進去就是MDN的官方文檔,
其中介紹
filter
CSS屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像，背景和邊框的渲染。
CSS標準裏包含了一些已實現預定義效果的函數。你也可以參考一個SVG濾鏡，通過一個URL鏈接到SVG濾鏡元素(SVG filter element)。
簡單的理解就是一個濾鏡.
如下圖,MDN官方提供了一個Demo,如下圖
比如這裏通過filter樣式改變了圖片,顏色,模糊,對比度等信息,如下圖,實現的是顏色變灰
其用法可以在剛剛的那個網站上找到:
關於grayscale()
將圖像轉換爲灰度圖像。值定義轉換的比例。值爲100%則完全轉爲灰度圖像，值爲0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0。其用法如下:
filter: grayscale(100%)
總結
所以現在我們就可以知道了,如何讓網站變灰,以及各大網站變成灰色,這裏我們考慮到各瀏覽器兼容寫法,可以參考下CSDN的寫法
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);
}
這樣的話,只要加上gray這個class就可以實現網頁變灰.
本文簡單介紹了一下關於網站變灰的實現,也學習到filter的相關用法,希望能給大家帶來一些幫助.
再次致敬英雄,共悼逝者!
