如何仅为元素背景应用mask-image而不影响其子元素？

我明白你的困扰！当你给父元素设置mask-image时，这个遮罩会作用于整个元素的渲染上下文——包括它所有的子元素，这就是为什么你的红色p标签也被裁剪了，z-index在这里帮不上忙，因为子元素本身就是父元素的一部分，层级再高也逃不开父元素的遮罩范围。

下面有两种实用的解决方案，都能实现“父元素背景带遮罩，子元素不受影响”的效果：

方案一：用伪元素承载遮罩（无需修改HTML结构） #

核心思路是把原来父元素的背景色和mask-image转移到伪元素上，让伪元素作为父元素的背景层，子元素则在伪元素上方渲染，这样就不会被遮罩裁剪。

修改后的代码如下：

* { box-sizing: border-box; } 
body { margin: 0; background: #000; } 

.el { 
  width: 100%; 
  height: 60px; 
  position: relative; /* 开启定位上下文，让伪元素能相对于它定位 */
}

/* 用伪元素承载背景和遮罩 */
.el::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff; 
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M100 60c-13.43 0-20.2-11.37-26.74-22.37C67.25 27.53 61.57 18 50 18s-17.25 9.54-23.26 19.63C20.2 48.63 13.43 60 0 60V0h100z'/%3E%3C/svg%3E"); 
  -webkit-mask-repeat: repeat-x; 
  -webkit-mask-position: left bottom; 
  z-index: -1; /* 让伪元素在子元素下方，不遮挡内容 */
}

.el p { 
  position: relative; 
  z-index: 1; /* 确保子元素在伪元素之上 */
  text-align: center; 
  padding-top: 20px; 
  width:400px; 
  margin: auto; 
  background: red; 
  color: white; 
} 

<div class="el">
  <p>Duis enim elit, porttitor id feugiat at, blandit at erat. Proin varius libero sit amet tortor volutpat diam laoreet.</p>
</div>

为什么这样有效？ #

伪元素是独立于父元素内容的渲染层，它只负责展示带遮罩的背景，而父元素本身没有设置任何遮罩，子元素自然不会被裁剪。通过z-index控制层级，让伪元素在内容下方，视觉上就和原来父元素带背景的效果一致，但子元素完全不受影响。

方案二：分离背景层与内容层（结构更清晰） #

如果你的布局比较复杂，也可以把遮罩背景和内容分成两个独立的元素，通过定位让它们重叠，内容层在上方即可。

修改后的代码如下：

* { box-sizing: border-box; } 
body { margin: 0; background: #000; } 

.container {
  width: 100%;
  height: 60px;
  position: relative; /* 作为两个子元素的定位容器 */
}

/* 单独的遮罩背景层 */
.el-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff; 
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M100 60c-13.43 0-20.2-11.37-26.74-22.37C67.25 27.53 61.57 18 50 18s-17.25 9.54-23.26 19.63C20.2 48.63 13.43 60 0 60V0h100z'/%3E%3C/svg%3E"); 
  -webkit-mask-repeat: repeat-x; 
  -webkit-mask-position: left bottom; 
}

/* 内容层 */
.el-content p { 
  position: relative; 
  z-index: 1; /* 让内容在背景层上方 */
  text-align: center; 
  padding-top: 20px; 
  width:400px; 
  margin: auto; 
  background: red; 
  color: white; 
} 

<div class="container">
  <div class="el-mask"></div>
  <div class="el-content">
    <p>Duis enim elit, porttitor id feugiat at, blandit at erat. Proin varius libero sit amet tortor volutpat diam laoreet.</p>
  </div>
</div>

优点 #

这种方式结构更直观，背景和内容完全分离，后续如果需要单独调整背景或内容的样式、层级，会更灵活，适合复杂的页面布局。

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