filter: grayscale(%)；设置灰色遮罩层后，怎样让头像颜色不受灰色遮罩层影响？

如何实现想要实现用户头像颜色不变，其余地方显示灰色遮罩层这种效果呢？

1. 首先就要把给整篇文档添加filter: grayscale(%);这种方法给摒弃掉（虽然这个方法真的很快也很简单）

2. 使用backdrop-filter做个遮罩层

以下是用此方法实现的效果

实现前效果

实现后效果

解题思路：

1. 首先要搞懂filter和backdrop-filter的本质区别，不同处，相同处
2. 不同处：
   2.1 filter作用于：元素的本身，意思是：给某个元素添加filter，作用于当前元素，并且它的后代元素也会继承这个属性（自己和后代都会改变）
   2.2 backdrop-filter：可以让一个元素后面区域添加图形效果（如模糊或颜色偏移）。 它适用于元素背后的所有元素。（只有后代会改变，自己不变）
3. 相同处：
   3.1 都可以实现遮罩层效果
4. 因为我没有找到filter怎样才能不影响用户头像所以我选择用第二种来实现（如果你有这种方法可以分享给我）
5. 核心：先给html添加高宽，这里的高宽是100%，再给html添加一个伪元素，这个伪元素就是（遮罩层）用来盖住当前的页面。

代码实现：

1. html部分不重要，so大家自行发挥
2. 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只能用在定位元素身上，这样就可以实现头像部分不受遮罩层影响的效果了。

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