CSS实现仅重叠红色遮罩的文本变色（白色背景文本不变）

开发者阿泽

2026-7-9

解决方案

要实现红色遮罩覆盖的文本变白、未覆盖区域文本保持黑色的效果，可以通过同级遮罩层+混合模式实现，结构简单且支持JS动态控制遮罩位置：

实现步骤

HTML结构
容器内同时放置文本元素和遮罩元素，遮罩元素绝对定位覆盖在文本上方：

<div class="container">
  <p class="content">这里是需要显示的文本内容，红色遮罩覆盖的部分会变成白色，其余部分保持黑色。</p>
  <div class="red-mask"></div>
</div>

CSS样式

容器设置相对定位，确保遮罩的绝对定位基于容器
文本默认黑色，容器背景设为白色（匹配需求中的背景色）
遮罩层使用mix-blend-mode: difference，实现遮罩下文本颜色反转，同时保留红色遮罩的视觉效果：

.container {
  position: relative;
  background-color: white;
  padding: 20px;
  width: 400px;
}

.content {
  color: #000;
  margin: 0;
  line-height: 1.6;
}

.red-mask {
  position: absolute;
  top: 30px; /* JS动态控制 */
  left: 50px; /* JS动态控制 */
  width: 200px; /* JS动态控制 */
  height: 80px; /* JS动态控制 */
  background-color: #f00;
  mix-blend-mode: difference;
}

JavaScript动态控制
通过修改遮罩元素的style属性，即可动态调整遮罩的位置和大小：

const mask = document.querySelector('.red-mask');
// 示例：动态设置遮罩位置和尺寸
mask.style.top = '50px';
mask.style.left = '20px';
mask.style.width = '250px';
mask.style.height = '100px';