目錄
1 緣起
爲了悼念新型冠狀病毒疫情罹難的同胞，清明節舉行了全國哀悼活動，當你瀏覽各大網頁的時候，會發現該他們的網頁界面都清一色的變成了灰色，這是怎麼實現的呢？
其實很簡單，稍微琢磨以下，就一行代碼即可滿足的你的好奇心，併爲您答疑解惑，不說廢話先擺上這個行神奇的代碼：
-webkit-filter: grayscale(100%);
2 演示
那麼如何實現呢？現在就給大家演示一下：
我們以CSDN爲例，效果是這樣：
再看一個示例：
3 原理解析
CSS3 filter(濾鏡)grayscale(%)：
屬性將圖像轉換爲灰度圖像。值定義轉換的比例。值爲100%則完全轉爲灰度圖像，值爲0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；
因此：修改所有圖片的顏色爲黑白 (100% 灰度): -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);
4 拓展
爲了兼容不同瀏覽器，你還可多寫幾行代碼：
html {
-webkit-filter: grayscale(100%);
/* webkit */
-moz-filter: grayscale(100%);
/*firefox*/
-ms-filter: grayscale(100%);
/*ie9*/
-o-filter: grayscale(100%);
/*opera*/
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: gray;
/*ie9- */
}
喜歡我們的分享，敬請關於我們，
