实现双背景色图片遮罩上方显示文本的问题求助

需求与问题 #

要实现带双背景色的图片遮罩，同时在遮罩上方显示可交互的文本。尝试两种实现方式后遇到以下问题：

• 直接使用mask属性：能为每个区块单独设置两种颜色，但需注意层级避免文本被遮挡
• :before伪元素实现遮罩：原本只能继承body背景色，无法给每个区块单独配置背景色和遮罩色

方法一：直接使用mask属性 #

通过外层容器背景色+内层容器mask实现双背景效果，mask-composite: exclude会让遮罩区域显示外层颜色，遮罩外显示内层背景色。

代码实现 #

.masked {
    background-color: blue; /* 遮罩外的颜色 */
    mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/alpha-cat.png);
    -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/alpha-cat.png);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center bottom;
    -webkit-mask-position: center bottom;
    mask-composite: exclude; /* 关键：遮罩区域排除当前背景，显示外层颜色 */
    z-index: -1; /* 将遮罩置于文本下方 */
    min-height: 100vh; /* 撑满视口高度，避免容器塌陷 */
}

对应HTML #

<!-- 外层容器设置第二种背景色（灰色） -->
<div style="background-color: gray;">
  <div class="masked">
    <div class="container">
      <h1>方法一演示</h1>
      <p>测试文本内容，确保链接可正常点击...</p>
      <p><a href='/'>测试链接</a></p>
    </div>
  </div>
</div>

方法二：改造伪元素实现独立颜色配置 #

用CSS变量解决伪元素无法单独设置颜色的问题，同时调整层级确保文本可交互。

代码实现 #

/* 外层容器：控制第二种背景色 */
.masked-2-wrap {
    background-color: var(--outer-bg, #fff); /* 默认白色，支持自定义 */
}

/* 父容器：定义遮罩色变量 */
.masked-2 {
    position: relative;
    --mask-bg: blue; /* 默认蓝色，每个区块可单独覆盖 */
}

/* 伪元素：生成遮罩 */
.masked-2::before {
    content: "";
    position: absolute;
    inset: 0; /* 替代top/left/right/bottom: 0 */
    background-color: var(--mask-bg);
    mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/alpha-cat.png);
    -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/alpha-cat.png);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center bottom;
    -webkit-mask-position: center bottom;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    z-index: -1; /* 遮罩置于文本下方 */
}

对应HTML（支持自定义颜色） #

<!-- 自定义灰色外层+蓝色遮罩 -->
<div class="masked-2-wrap" style="--outer-bg: gray;">
  <div class="masked-2" style="--mask-bg: blue;">
    <div class="container">
      <h1>方法二演示（自定义颜色）</h1>
      <p>测试文本内容，确保链接可正常点击...</p>
      <p><a href='/'>测试链接</a></p>
    </div>
  </div>
</div>

<!-- 自定义米色外层+绿色遮罩 -->
<div class="masked-2-wrap" style="--outer-bg: #f5f0e1;">
  <div class="masked-2" style="--mask-bg: #2ecc71;">
    <div class="container">
      <h1>另一组自定义颜色</h1>
      <p>测试文本内容，确保链接可正常点击...</p>
      <p><a href='/'>测试链接</a></p>
    </div>
  </div>
</div>

通用文本容器样式 #

确保文本在遮罩上方且排版合理：

body {
  margin: 0;
}

.container {
  color: white;
  min-height: 100vh;
  z-index: 2;
  text-align: center;
  position: relative;
  padding: 2rem;
  box-sizing: border-box;
}

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