在網站都變成灰色，幾行程式碼就搞定了一文中，介紹各大網站都使用了CSS filter，使用網站全部程式設計了灰色。整理出來一段規範的樣式程式碼如下：
filter置灰程式碼
那麼除了filter，還有什麼方式可以將網站都變成灰色呢？直接上程式碼：
方式一：backdrop-filter
backdrop-filter
backdrop-filter
屬性含義是讓你為一個元素後面區域新增圖形效果（如模糊或顏色偏移）。
這段樣式程式碼給body加了一層遮罩，並置於頂層，是所有頁面元素都置於遮罩之下。然後使用backdrop-filter：grayscale（）使遮罩下元素置灰色。
filte
r
和
backdrop-filter
使用上最明顯的差異在於：
filter
：作用於當前元素，並且它的後代元素也會繼承這個屬性。
backdrop-filter
：作用於元素背後的所有元素。
filter
是作用於元素本身，而
backdrop-filter
是作用於元素背後的區域所覆蓋的所有元素。而它們所支援的濾鏡種類是一模一樣的。
透過z-index理解
元素背後的所有元素的含義。
這裡有個很嚴重的問題，我們的頁面是存在大量互動效果的，如果疊加了一層遮罩效果在其上，那這層遮罩下方的所有互動事件都將失效，譬如 hover、click 等。我們可以透過給這層遮罩新增上
pointer-events： none
，讓這層遮罩不阻擋事件的點選互動。
方式二：mix-blend-mode
mix-blend-mode
mix-blend-mode
屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。
這段樣式同樣設定了一層遮罩，並設定背景色
background： rgba（0， 0， 0， 1）
，透過
mix-blend-mode： color
設定遮罩與body顏色混合，達到置灰的效果。也可以透過這種方式進行顏色混合達到其他顏色的目的。對於顏色把握有較高的要求。
{ mix-blend-mode： hue； // 色相 mix-blend-mode： saturation； // 飽和度 mix-blend-mode： color； // 顏色}
總結：
如果你需要全站置灰，使用 CSS 的
filter： grayscale（）
對於僅僅需要首屏置灰的，可以使用
backdrop-filter： grayscale（）
配合
pointer-events： none
對於需要更好相容性的，使用混合模式的
mix-blend-mode： hue
、
mix-blend-mode： saturation
、
mix-blend-mode： color
也都是非常好的方式
涉及CSS，但凡和顏色打交道，你都應該想起
filter
、
backdrop-filter
和
mix-blend-mode
。
