如何實現想要實現用戶頭像顏色不變，其余地方顯示灰色遮罩層這種效果呢？

1. 首先就要把給整篇文檔添加filter: grayscale(%);這種方法給摒棄掉（雖然這個方法真的很快也很簡單）

2. 使用backdrop-filter做個遮罩層

以下是用此方法實現的效果

實現前效果

實現后效果

解題思路：

首先要搞懂filter和backdrop-filter的本質區別，不同處，相同處

不同處：
2.1 filter作用于：元素的本身，意思是：給某個元素添加filter，作用于當前元素，并且它的后代元素也會繼承這個屬性（自己和后代都會改變）
2.2 backdrop-filter：可以讓一個元素后面區域添加圖形效果（如模糊或顏色偏移）。 它適用于元素背后的所有元素。（只有后代會改變，自己不變）

相同處：
3.1 都可以實現遮罩層效果

因為我沒有找到filter怎樣才能不影響用戶頭像所以我選擇用第二種來實現（如果你有這種方法可以分享給我）

核心：先給html添加高寬，這里的高寬是100%，再給html添加一個偽元素，這個偽元素就是（遮罩層）用來蓋住當前的頁面。

代碼實現：

html部分不重要，so大家自行發揮

css部分

/* html和遮罩層部分css */ html {position: relative;width: 100%;height: 100%; } html::before {content: '';position: absolute;inset: 0;backdrop-filter: grayscale(95%);z-index: 9;pointer-events: none; } /* 頭像部分css */ .login a img { position: relative; vertical-align: middle;width: 30px;height: 30px;z-index: 999; }

2.1 css部分中，重點強調html的偽元素是作為子元素的存在所以子絕父相要設置（子元素是壓在父元素上顯示，這個要用定位來做）
2.2 backdrop-filter: grayscale(95%);此方法實現的遮罩層，再添提高層級，下面的元素會無法點擊（交互失敗）pointer-events: none;是用來解決點擊失效的方法
2.3 然后再找到頭像部分，核心點就是提高層級（要比遮罩層的層級高），那么就要把頭像部分添加個定位，因為z-index只能用在定位元素身上，這樣就可以實現頭像部分不受遮罩層影響的效果了。

（希望我的思路能幫助到有此困惑的朋友）

總結

以上是生活随笔為你收集整理的filter: grayscale(%)；设置灰色遮罩层后，怎样让头像颜色不受灰色遮罩层影响？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。