使用clip-path设置自定义背景后如何让重叠文本在各屏幕自动变白

实现文本与clip-path背景重叠时自动变色的两种方案 #

你当前直接将p标签颜色设置为白色的写法，会导致非重叠区域的文本也变成白色，无法显示原本的灰色。可以通过以下两种方式实现需求：

方案1：使用mix-blend-mode混合模式（适配性更强）

首先给父容器.page添加定位属性，确保伪元素背景定位正确：

.page {
  position: relative;
  overflow: hidden;
}

修改p标签的样式：

.page p {
  width: 100%;
  text-align: center;
  margin: auto;
  margin-top: 31px;
  /* 非重叠区域默认灰色 */
  color: #666;
  /* 混合模式实现和下方红色背景叠加后变为白色 */
  mix-blend-mode: difference;
  /* 可调整亮度对比度保证白色显示效果 */
  filter: brightness(2) contrast(1.2);
}

方案2：使用background-clip裁剪文本

如果担心混合模式的兼容问题，可以直接给文本设置和红色背景形状一致的裁剪规则：

.page p {
  width: 100%;
  text-align: center;
  margin: auto;
  margin-top: 31px;
  /* 设置双色背景，重叠区域为白色、其他区域为灰色 */
  background: linear-gradient(to right, #fff 55%, #666 45%);
  /* 和你设置的红色背景clip-path完全一致，保证对齐 */
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

两种方案都可以在所有屏幕尺寸下自动适配重叠区域的文本颜色，不需要额外写媒体查询。

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