CSS | 探究網站變灰色的那些知識盲區的知識碎片

願山河依舊，網站、App 今後再無灰色、黑色狀況！！！

前言

夢中清醒，哦，又是一個陽光明媚的早上。

致敬英雄，市面上 App、網站等都已置灰。

緬懷的同時，忽然冒出一個問題，怎麼作到的？難不成一個個調整圖片，調整對應的控件色值？

顯然不該該。想來想去還不如直接調試一番，找找感受。

探尋日記 - 翻翻別人家

Chrome 打開 B 站，直接打開開發者模式，html 根節點有個 class=「gray」，好奇點點看看有什麼反映：

一個 class 搞定嗎？抱着懷疑的心態找了掘金：

共同點，都是使用了 filter:grayscale。

探尋日記 - 官網看看真是個啥

filter CSS屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡一般用於調整圖像，背景和邊框的渲染。

官方給出一個小例子：

找到對應將圖像轉爲灰色圖像屬性：

探尋日記 - 實踐

俗話說得好，好記性不如爛筆頭，本身親自動手纔是最實際的。

效果很明顯，若是想讓整個頁面圖片灰度發生變化，只須要按照前輩們的方案，直接在 html 設置 class 便可，方案採用掘金：

附上對應 CSS 樣式：

.mourning {
    -webkit-filter: grayscale(100%);  /* 兼容 Chrome、Safari 瀏覽器 */
    -moz-filter: grayscale(100%); /* 兼容 FireFox 火狐瀏覽器 */
    -ms-filter: grayscale(100%); /* 兼容 IE 瀏覽器 */
    -o-filter: grayscale(100%); /* 兼容 Opera 瀏覽器 */
    filter: grayscale(100%);
    filter: #808080;
}

篇後語

哪有什麼歲月靜好，不過是有人替你負重前行。

心懷感恩。

最後，再次但願全部的網站不再要有變成灰色、黑色的狀況！！！

永遠也不要有了！！！

參考資料

• Web 開發技術 > CSS（層疊樣式表） > filter