記錄一下最近很火的用一行程式碼實現網頁變灰 發布於 1 天前 – 15 次檢閱

• 2020 年 4 月 9 日
• 筆記

2020 年 4 月 4 日，星期六，清明節。基本上你看到的主流網站都變灰白了(雖然我的也是…)，大家可以看到全站的內容都變成灰色了，包括按鈕、圖片等等。這時候我們可能會好奇這是怎麼做到的呢？

有人會以為所有的內容都統一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統一換成了灰色樣式。

但你想想這個成本也太高了，而且萬一某個控制項忘記加灰色樣式了豈不是太突兀了。

其實，解決方案很簡單，只需要幾行程式碼就能搞定了。

直接css:

html {  -webkit-filter: grayscale(100%);  filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);  }

也是用的這個 CSS 樣式，其內容為：

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);  }

這個實現看起來兼容性會更好一些,所以通過一個全局的 CSS 樣式就能將整個網站變成灰色效果。

從上面css樣式程式碼中看到有個樣式名叫做 filter，於是搜下 MDN 的官方介紹。

其鏈接為：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter 大家不妨可以進去學習一下。