如何仅对重叠背景区域的文字应用颜色变化（其余文字保持原色）-html教程-PHP中文网

如何仅对重叠背景区域的文字应用颜色变化（其余文字保持原色）

本文介绍一种纯 css 实现方案：当文字部分覆盖在彩色背景上时自动变为白色，而未覆盖区域仍保持黑色（或其他指定颜色），无需 javascript 干预或混合模式，兼容性好且语义清晰。

本文介绍一种纯 css 实现方案：当文字部分覆盖在彩色背景上时自动变为白色，而未覆盖区域仍保持黑色（或其他指定颜色），无需 javascript 干预或混合模式，兼容性好且语义清晰。

在 Web 开发中，常遇到这样的视觉需求：一段连续文本横跨两种背景色（例如左侧为白色容器、右侧为红色遮罩层），希望仅在红色区域内的文字显示为白色，其余部分保持黑色。看似简单，但 mix-blend-mode 或 background-clip 等方案往往导致全局颜色失真或无法精确控制边界——因为 CSS 本身不提供“基于像素级重叠检测的条件着色”能力。

因此，最可靠、兼容性最佳的解法是 双图层文本叠加 + 精确裁剪：用两个完全相同的文本节点（或伪元素），分别置于不同 z-index 层，并通过父容器的 overflow: hidden 与定位控制其可见区域。

✅ 推荐方案一：结构化双文本（语义清晰，易于维护）

<div class="container">
  <div class="bg">
    <div class="overlapping-text">ABCABCABCABCABC</div>
  </div>
  <div class="nonoverlapping-text">ABCABCABCABCABC</div>
</div>

.container {
  border: 1px solid black;
  position: relative;
  height: 1.2em;
  width: 300px;

  --overlapping: white;
  --nonoverlapping: black;
}

.bg {
  background: #AD3435;
  width: 60%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.nonoverlapping-text,
.overlapping-text {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  line-height: 1.2;
}

.nonoverlapping-text {
  color: var(--nonoverlapping);
  z-index: 1;
}

.overlapping-text {
  color: var(--overlapping);
  z-index: 2;
}

✅ 优势：结构明确、支持换行（稍作调整）、便于 JS 动态更新内容；
⚠️ 注意：需确保两段文本内容、字体、大小、行高完全一致，否则会出现错位。

✅ 推荐方案二：伪元素精简版（轻量、适合内联场景）

若追求极致简洁且文本为单行，可使用 ::before / ::after 伪元素配合 attr(data-content)：

<div class="masked" data-content="ABCABCABCABC" style="--fill: 60%;"></div>
<div class="masked" data-content="Hello World!" style="--fill: 74%;"></div>

.masked {
  position: relative;
  display: inline-block;
  border: 1px solid black;
  line-height: 1.2;
  font-family: system-ui, sans-serif;
}

.masked::before {
  content: attr(data-content);
  position: absolute;
  top: 0; left: 0;
  width: var(--fill);
  height: 100%;
  background: #AD3435;
  color: white;
  overflow: hidden;
  white-space: nowrap;
  z-index: 2;
}

.masked::after {
  content: attr(data-content);
  color: black;
  z-index: 1;
  position: relative;
}