如何用CSS实现红背景白文字、白背景黑文字的样式效果？

你之前的实现不符合预期是因为mix-blend-mode: difference会将文字颜色和底层背景色做逐像素的差值计算，最终呈现的是两者的反色混合效果，无法精准固定为只有黑白两种输出。可以根据你的兼容要求选择以下方案：

方案1：CSS 相对颜色语法（现代浏览器首选） #

直接通过颜色对比度判断自动输出适配的黑白文字，Chrome 114+、Firefox 123+、Safari 17.4+ 均支持：

/* 给所有带背景的元素统一定义背景色变量 */
.red-bg {
  --bg-color: #d6002e;
  background-color: var(--bg-color);
}
.white-bg {
  --bg-color: #ffffff;
  background-color: var(--bg-color);
}
/* 文字自动适配当前上下文的背景色变量 */
.target-text {
  color: color-contrast(var(--bg-color) vs white, black);
}

方案2：类名绑定适配（全浏览器兼容） #

如果需要兼容旧版本浏览器，直接通过父容器的背景类名控制文字颜色即可：

/* 默认白色背景下文字为黑色 */
.target-text {
  color: #000000;
}
/* 红色背景下文字自动切换为白色 */
.red-bg .target-text {
  color: #ffffff;
}
.red-bg {
  background: #d6002e;
}
.white-bg {
  background: #ffffff;
}

方案3：混合模式适配（无类名、仅两种固定背景场景适用） #

如果不想额外加类名、且确认页面只会出现红色、白色两种背景，可以用混合模式加滤镜实现：

.target-text {
  mix-blend-mode: exclusion;
  color: #ffffff;
  filter: grayscale(1) contrast(999);
}

原理是先通过排除混合得到基础反色，再用极高对比度将所有中间色压缩为纯黑或纯白，只会输出两种文字颜色适配你的需求。

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