父元素设置Backdrop-filter时子元素同属性失效问题咨询

失效原因 #

backdrop-filter本身支持多层嵌套，出现效果不符合预期是浏览器的底层渲染逻辑导致的：
backdrop-filter 只会作用于当前元素下方已经完成渲染的所有层内容，不会直接读取最底层的原始背景：

• 父元素设置backdrop-filter: blur(15px)后，浏览器会先将父元素下方的原始背景模糊，再把父元素的半透背景、模糊后的底、内部文字内容整体渲染成一个独立的合成层
• 子元素的backdrop-filter: blur(5px)只能对已经被父层模糊过的合成层做二次模糊，相当于叠加了两次模糊效果，才会出现发虚、发光的异常表现

可用解决方案 #

方案1：改为兄弟元素布局，解除嵌套关系 #

将需要独立设置backdrop-filter的元素从父容器中移出，作为平级兄弟元素通过定位叠加，两个元素的backdrop-filter都会直接作用于原始背景，互不干扰：

<body>
  <div class="container">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem facere accusantium ullam omnis culpa. Blanditiis, placeat ab incidunt doloremque voluptate, natus deserunt, animi culpa deleniti illum voluptas a accusamus amet.
  </div>
  <div class="header">Header</div>
</body>

body {
  background-image: url(https://picsum.photos/1000);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.container {
  width: 400px;
  height: 150px;
  position: relative;
  padding: 24px;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px);
  font-size: 1.5em;
  color: #FFF;
}
.header {
  position: absolute;
  z-index: 10;
  width: 400px;
  top: calc(50vh - 75px);
  left: calc(50vw - 200px);
  padding: 15px 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  color: #000;
}

方案2：嵌套结构下用伪元素隔离父层的模糊效果 #

如果不能修改HTML结构必须保留嵌套，就把父元素的backdrop-filter转移到独立的伪元素上，父元素本身不设置任何背景和滤镜，避免形成合成层影响子元素：

body {
  background-image: url(https://picsum.photos/1000);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.container {
  width: 400px;
  height: 150px;
  position: relative;
  padding: 24px;
  /* 移除原有的background和backdrop-filter属性 */
  font-size: 1.5em;
  color: #FFF;
}
/* 新增伪元素承载父层的模糊效果 */
.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px);
  z-index: -1;
}
.header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding: 15px 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  color: #000;
}

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