无需给元素设置背景，如何用CSS实现一个元素遮挡另一个重叠元素？

这个需求可以纯CSS实现，无需引入JavaScript，也不用依赖clip-path属性，完全适配元素位置动态变化的场景，具体实现如下：

核心逻辑 #

利用CSS混合模式特性，在上层元素和下层元素之间插入一个和上层元素完全重合的伪元素，通过mix-blend-mode: destination-out自动挖空下层元素的重叠区域，全程不会影响父容器背景图的正常展示。

完整代码 #

<div class="container">
  <span>Text 1</span>
  <span data-text="Text 2">Text 2</span>
</div>

.container {
  background: url(https://www.k9web.com/wp-content/uploads/2019/01/adorable-shiba-inu-dog-lying-on-the-sofa-1536x1024.jpg) center/cover no-repeat;
  position: relative;
  width: 300px;
  height: 240px;
  /* 关键：创建独立堆叠上下文，限制混合模式仅在当前容器内生效，不影响外部内容 */
  isolation: isolate;
  color: #fff; /* 可自定义文本颜色 */
}

span {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-size: 30px;
}

span:nth-child(2) {
  top: 54%;
  left: 54%;
  z-index: 2; /* 上层文本放在最顶部展示 */
}

/* 遮罩伪元素：和上层文本完全重合，自动跟随上层元素移动 */
span:nth-child(2)::before {
  /* 动态读取上层元素的文本内容，修改上层文本时无需同步改CSS */
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 关键：重叠位置的下层内容会被完全挖空，透出底层背景图 */
  mix-blend-mode: destination-out;
}

方案优势 #

• 自动适配动态位置：上层元素位移、修改内容、调整尺寸时，伪元素会自动同步变更，无需手动计算裁切参数
• 不破坏背景展示：不需要给元素设置背景色，父容器的背景图、透明效果都可以正常展示
• 兼容性良好：所有现代浏览器均支持该特性，无额外依赖

备选兼容方案 #

如果需要兼容极老版本不支持混合模式的浏览器，可以用JS配合clip-path实现：

• 监听两个元素的位置、尺寸变化事件
• 实时计算上层元素相对下层元素的坐标范围
• 动态生成clip-path裁切参数赋值给下层元素，排除上层元素的覆盖区域

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