为什么overlay中backdrop-filter: blur()未对所有下方元素生效？

问题原因 #

backdrop-filter: blur() 仅会模糊当前元素所在堆叠上下文内、z-index低于该元素的底层内容，出现仅部分元素生效的情况，通常是以下几个原因导致：

• 堆叠上下文隔离：如果未被模糊的文字所在父容器设置了position: relative/absolute/fixed + z-index != auto、transform属性、opacity < 1、filter属性、contain: layout/paint等会触发独立堆叠上下文的属性，且该容器的整体层级高于遮罩所在的堆叠上下文，那么这些文字就不会被遮罩的滤镜影响。这里要注意半透明遮罩的背景色叠加和滤镜作用逻辑是分开的：你换红色背景能看到遮罩盖在文字上只是背景色的视觉叠加，不代表文字层级低于遮罩，滤镜只会作用于真正在遮罩背后的低层级元素。
• 遮罩内部相对层级问题：你提供的代码里遮罩的z-index: -10，且父元素z-index为999，说明父元素本身已经触发了独立堆叠上下文，遮罩的z-index是仅在父元素内部生效的相对值。如果父元素内部的文字子元素z-index高于-10，这些文字实际是在遮罩的上层，自然不会被背后的遮罩滤镜模糊。
• 合成层兼容问题：如果未被模糊的元素设置了transform: translateZ(0)、will-change: transform等触发硬件加速的属性，被浏览器提升到了独立合成层，部分旧版浏览器的backdrop-filter不会作用于跨合成层的内容，也会出现部分失效的情况。

解决方法 #

• 优先调整元素层级：将遮罩从当前父元素中移出，作为body的直接子元素，设置足够高的全局z-index，确保所有需要被模糊的内容都在根堆叠上下文内且层级低于遮罩。
• 清理不必要的堆叠上下文触发属性：去掉文字所在容器不必要的transform、非默认z-index + position配置，避免不必要的上下文隔离。
• 规避合成层兼容问题：如果是旧版浏览器兼容场景，去掉不需要的硬件加速触发属性即可。

内容的提问来源于stack exchange，提问作者gabriel-ortiz