很久沒有更新博客了，而且前段時間也在忙著找工作饮笛，到現(xiàn)在才新入職兩天T.T咨察，今天開始重新更新個人博客了。
今天主要來探討一下讓頁面變黑白效果的方法
今年四月四的時候福青，國內不僅暫停了大部分娛樂活動摄狱，而且各大門戶網(wǎng)站、視頻網(wǎng)站无午，都對首頁或者所有頁面做出了內容和樣式的大調整媒役。在諸多修改中，最具視覺沖擊力的當屬大幅的網(wǎng)頁黑白效果了宪迟。那么酣衷，如何不修改網(wǎng)頁的大多數(shù)屬性、重新打包圖片等次泽，簡單地實現(xiàn)頁面的黑白效果呢穿仪？
可以借用 CSS3 的 filter——濾鏡屬性
最直接的想法應該就是修改CSS樣式表了席爽。通過簡單的查詢可以了解到，CSS3中有filter這個屬性啊片。
- grayscale(%)
將圖像轉換為灰度圖像只锻。值定義轉換的比例。值為100%則完全轉為灰度圖像紫谷，值為0%圖像無變化齐饮。值在0%到100%之間，則是效果的線性乘子碴里。若未設置沈矿，值默認是0；
簡單的用法：
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
上面的代碼通過 img 選擇器將所有圖片改成了黑白色
如果想要將整個頁面改成黑白色咬腋，可以選擇使用 html 選擇器羹膳。
html {
-webkit-filter:grayscale(100%);
filter: grayscale(100%);
}
具體可以到菜鳥教程里查看filter這個屬性的各種濾鏡，功能可以說是非常強大根竿。
但是問題就在于這是一個CSS3屬性陵像。兼容問題目前始終是 CSS3 繞不開的問題，我們通過can i use查閱寇壳，可以看到該屬性對于IE等老舊瀏覽器并不友好醒颖。
目前查詢到的能兼容其它瀏覽器的較全版本如下所示：
html{
filter: gray;
filter: grayscale(100%); /* 標準寫法 */
-webkit-filter: grayscale(100%); /* webkit內核支持程度較好 */
-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... 這一行有些意思泞歉，它主要針對的應該是Firefox瀏覽器，因為 Firefox 雖說不支持css filter匿辩，但是支持svg effects for html腰耙。算是曲線救國了～
svg 圖片進行解碼與顏色填充達到修改顏色的目的。
而filter:progid:DXImageTransform.Microsoft.BasicImage()此行代碼為IE自己提供的濾鏡實現(xiàn)铲球，性能不太友好挺庞。
可以來看看騰訊視頻、嗶哩嗶哩等對于黑白效果的實現(xiàn)稼病。
嗶哩嗶哩：僅一行代碼选侨，圖片素材則是單獨替換的灰度圖，并非通過樣式修改然走，應該是有性能上的考量：
html{
webkit-filter: grayscale(.95);
}
騰訊視頻使用代碼如下援制，在IE瀏覽器下同樣表現(xiàn)良好：
html{
filter: gray;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
總的來說，上面的方式可以解決大部分的問題芍瑞，flash晨仑、視頻等內容沒辦法一一覆蓋，像B站就只是更改了首頁的色調，其他的頁面并沒有做特殊處理寻歧。
所以具體情況還是要具體分析。對于大型的樣式管理比較復雜的網(wǎng)站秩仆，要是因為這樣一個小調整導致整個網(wǎng)站訪問大幅減慢码泛，身為做出微小工作的你，可能就要背鍋了2333澄耍。
最后對于IE10噪珊、11，可能還得用js齐莲。解決方案主要參考ajaxblender的《Convert Images to Grayscale》痢站。
來做個小實驗吧。
在 App.vue 中的 style 標簽中插入上述代碼选酗。
原來的樣子：
插入后阵难，在chrome和Firefox中的樣子：
簡單記錄一下～
