CSS backdrop-filter嵌套使用时子元素模糊效果失效的解决问询

只要元素本身加了backdrop-filter，浏览器就会自动把这个元素和它的所有子元素打包成一个独立的渲染图层，做渲染隔离。这时候子元素的backdrop-filter，根本碰不到最底层的原始页面背景，只能对父元素已经糊完3px的那层中间结果再做计算——相当于你拿一张已经被轻度模糊过的纸盖在眼睛上，再在眼前加个高度数的散光片，最终看到的清晰度和只盖那张纸没差，自然实现不了想要的50px强模糊效果。

整个调整全程只动CSS，原来的HTML一行都不用改，核心就是把父元素身上的模糊效果，挪到一个不触发渲染隔离的底层位置：

• 先把.header自己身上的backdrop-filter: blur(3px)删掉，给.header加position: relative;，把它设为内部元素的定位参照
• 给.header加一个绝对定位的伪元素，专门承担原来父容器的3px模糊效果，规则如下：

  .header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* 这里就是原来父元素的3px模糊效果 */
    backdrop-filter: blur(3px);
    /* 原来父元素的1px白边也挪到这里，保证视觉一致 */
    border: 1px solid #FFF;
  }
  

• 原来写在li上的backdrop-filter: blur(50px)完全保留不用动。这时候因为.header本身没有渲染隔离了，li的模糊计算可以直接穿透中间层，对着最底层的原始页面背景做50px的强模糊，自然就形成了“父层整体轻度模糊、导航项位置强模糊”的分层效果。

• 这种调整方式对浏览器兼容性没有额外要求，只要浏览器支持backdrop-filter就能正常跑，不需要写额外的兼容hack
• 以后要调整父层的模糊强度，直接改伪元素上的blur参数就行，完全不会影响li自己设的50px模糊效果
• 整个过程不会改动原有DOM结构，导航的点击、布局对齐这些原有逻辑都不受影响

内容的提问来源于stack exchange，提问作者Droid