如何设置背景模糊遮罩并让文本元素正常显示在遮罩层上方

问题根源 #

层级不生效的核心原因有两个：

• z-index属性仅对position值不为static的元素生效，你代码里的.bannerTitle默认是静态定位，改z-index不会有任何效果
• 同个父堆叠上下文下，DOM顺序靠后的定位元素默认堆叠优先级更高。你的.comfortBlur是绝对定位元素，在HTML结构里排在标题、卡片容器之后，默认会覆盖前面的同层级元素。

修复方案 #

方案1：最小改动兼容现有代码 #

不需要调整HTML结构，仅补充3处CSS规则即可：

1. 给父容器添加isolation: isolate创建独立堆叠上下文，避免内部z-index溢出影响外部元素
2. 给模糊遮罩层设置低z-index，放到内容层下方
3. 给需要置顶的标题、卡片容器设置相对定位+更高的z-index
   修改后的完整CSS：

.comfortBackground{
  background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
  position: relative;
  width:100%;
  height:100vh;
  background-size:cover;
  background-position: center;
  background-repeat:no-repeat;
  isolation: isolate;
}

.comfortBlur{
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width: 100%;
  background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  filter:blur(10px);
  transition:filter .5s ease;
  backface-visibility: hidden;
  z-index: 1;
}

.bannerTitle {
  position: relative;
  z-index: 10;
}

.comfortCardContainer{
  display: flex;
  position: relative;
  right:25%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index: 10;
}

方案2：精简结构优化写法（推荐） #

现有代码重复定义了两次相同的背景图，冗余且会产生额外的资源加载开销，可以直接用父容器的::before伪元素实现模糊遮罩，不需要额外的空div节点：
优化后的CSS：

.comfortBackground{
  position: relative;
  width:100%;
  height:100vh;
  background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
  background-size:cover;
  background-position: center;
  background-repeat:no-repeat;
  isolation: isolate;
}

/* 伪元素实现模糊遮罩，继承父容器背景，无需重复写图片地址 */
.comfortBackground::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(10px);
  transition: filter .5s ease;
  z-index: 1;
}

.bannerTitle {
  position: relative;
  z-index: 10;
}

.comfortCardContainer{
  display: flex;
  position: relative;
  right:25%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index: 10;
}

对应的HTML可以删除空的.comfortBlur节点，简化为：

<div class="row">
    <div class="col-sm-12 p-0 ">
        <div class="comfortBackground">
            <div class="bannerTitle">
              <h1>Title</h1>
            </div>
            <div class="comfortCardContainer">
                Card Text
            </div>
        </div>
    </div>
</div>

提示：如果需要调整模糊遮罩的明暗度，可以给伪元素额外加一层半透明背景色，比如background-color: rgba(0,0,0,0.2)叠加在继承的背景上，不需要额外加节点。

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