本文介绍一种纯 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;
}✅ 优势：零额外 DOM 节点、CSS 驱动、支持动态 --fill 变量（可由 JS 修改）；
⚠️ 注意：仅适用于单行文本；white-space: nowrap 防止断词裁剪异常；务必设置 font-family 和 line-height 保证伪元素渲染一致。
? 关键原理总结
- 无真实“检测”逻辑：CSS 不支持运行时像素判断，因此采用“空间占位+视觉覆盖”策略；
- z-index 分层控制：上层文本（红区）仅在遮罩宽度内可见，下层文本（白区）作为默认底色；
- 变量驱动可维护性：通过 CSS 自定义属性统一管理颜色，便于主题切换；
- 避免 mix-blend-mode 陷阱：该属性作用于整个元素，无法实现“局部替换”，易造成非预期反色。
此方案已在 Chrome/Firefox/Safari/Edge（≥ v88）中稳定运行，无需前缀，是当前兼顾效果、性能与可维护性的最优实践。
