是否有方法可以取消特定区域的backdrop-filter效果？

CSS中父元素设置的filter属性会作用于其整个包含的堆叠上下文，所有子元素都会被统一应用该效果，无法直接通过给子元素设置filter: none来取消父容器模糊效果的影响，可以用以下两种方案实现需求：

方案1：调整DOM结构（兼容性最优） #

把不需要模糊的.blur-off元素从模糊父容器中移出，和模糊容器放在同一个父级下，通过绝对定位对齐到原本的位置即可。
代码示例：

<!-- 原DOM结构 -->
<!-- 
<div class="blur-container" style="filter: blur(4px)">
  <p>需要模糊的文本内容</p>
  <div class="blur-off">不需要模糊的内容</div>
</div>
-->

<!-- 修改后结构 -->
<div class="wrapper" style="position: relative">
  <div class="blur-container" style="filter: blur(4px)">
    <p>需要模糊的文本内容</p>
  </div>
  <div class="blur-off" style="position: absolute; top: 20px; left: 20px">
    不需要模糊的内容
  </div>
</div>

方案2：使用backdrop-filter实现背景模糊（无需修改DOM） #

如果不方便调整DOM结构，可以放弃父元素的filter属性，改用backdrop-filter做背景层模糊，仅模糊容器背景而不影响子元素内容。
代码示例：

.blur-container {
  position: relative;
}
/* 单独做模糊背景层 */
.blur-container::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(4px);
  z-index: 0;
}
/* 需要模糊的子元素设置层级低于背景层 */
.blur-container p {
  position: relative;
  z-index: -1;
}
/* 不需要模糊的元素层级高于背景层 */
.blur-off {
  position: relative;
  z-index: 1;
}

注意：backdrop-filter不支持IE及Chrome 76以下版本，需要考虑兼容场景再使用。

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