使用filter: blur()时如何避免元素模糊效果覆盖周边相邻元素

问题本质 #

• filter: blur()的模糊效果会沿元素盒子边缘向外扩展对应半径的区域，你设置了50px模糊半径，因此.main顶部的模糊区域会向上溢出自身高度范围
• filter属性会触发新的堆叠上下文，DOM结构中后出现的.main默认堆叠层级高于先出现的.header，因此溢出的模糊区域会覆盖住粉色header

可用解决方案 #

方案1：调高header堆叠层级（改动最小） #

给header设置相对定位和更高的z-index，强制让header显示在最上层：

.header {
  width: 100%;
  height: 60px;
  background-color: pink;
  /* 新增以下代码 */
  position: relative;
  z-index: 1;
}

该方案不会改动原有布局逻辑，适配绝大多数场景。

方案2：裁剪main的溢出模糊区域 #

给.main外层新增一个父容器，设置overflow: hidden裁掉向外溢出的模糊部分：
修改后的HTML结构：

<div class="container">
    <div class="header"></div>
    <!-- 新增父容器 -->
    <div class="main-wrap">
        <div class="main"></div>
    </div>
</div>

新增的CSS代码：

.main-wrap {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

该方案适合不需要元素边缘模糊效果外露的场景。

方案3：用内边距抵消顶部模糊溢出 #

给.main添加和模糊半径等值的上内边距，让模糊区域不会向上超出布局范围：

.main {
  width: 100%;
  height: 400px;
  background-color: black;
  filter: blur(50px);
  /* 新增以下代码 */
  padding-top: 50px;
  box-sizing: border-box;
}

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