致敬英雄，共悼逝者，css 讓頁面變黑白

壹 ❀ 引

今天是四月四日清明節，也是全國哀悼抗疫烈士的一天。細心的同學可以發現，不僅是娛樂活動以及游戲全部停止，當我們打開各大門戶網站，網站頁面也都變成了黑白，那么具體怎么做呢，這里可以借用CSS3 的 filter濾鏡屬性，一個最簡單的設置：

html {
    -webkit-filter:grayscale(100%);
    filter: grayscale(100%);
}

由於是CSS3屬性，所以自然會存在兼容問題，我們通過can i use查閱，可以看到該屬性對於IE等老舊瀏覽器並不友好。

當然，網上也有提供一個兼容其它瀏覽器的較全版本，如下：

html{
    filter: gray;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 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);
    -webkit-filter: grayscale(1);
}

簡單說一下，這一段代碼中，filter:url("data:image...這一段主要針對svg圖片進行解碼與顏色填充達到修改顏色的目的。

而filter:progid:DXImageTransform.Microsoft.BasicImage()此行代碼為IE自己提供的濾鏡實現，性能不太友好。

作為參考，我查閱了騰訊視頻，嗶哩嗶哩，開源中國等網站對於黑白效果的實現。

嗶哩嗶哩的簡單粗暴，僅一行代碼，當然針對於頭部圖片素材則是單獨替換的黑色圖片，並非通過樣式修改：

html{
    webkit-filter: grayscale(.95);
}

騰訊視頻使用代碼如下，且在IE瀏覽器表現良好：

html{
    filter: gray;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

而開源工作使用的就是我上面提到的那一大段樣式了。

綜合來說，上述代碼能解決大部分情況，但網站不同，所展現的內容也不盡相同，可能還有視頻，flash情況，特殊情況就只能針對性去處理了。

另外，如果樣式實在搞不定的，我們也可以通過JS來代勞處理頁面顏色展現，例如 grayscale.js等。

關於讓頁面變黑白的樣式就說道這里了，其實也只是個簡單記錄。

最后，緬懷烈士，致敬英雄，感謝一線醫務人員以及所有工作人員，謝謝你們為祖國的付出。