如何用CSS mix-blend-mode实现文本与背景的最大对比度？

仅用CSS就能实现文本根据背景自动切换黑色或白色，达到最高对比度，无需遍历所有mix-blend-mode模式，以下是两种兼容性较好的可行方案：

方案一：利用mix-blend-mode: difference强制黑白对比 #

通过混合模式计算文本与背景的颜色差值，配合滤镜将过渡色强制转为纯黑/纯白，效果稳定：

HTML结构 #

<div class="bg-box">
  <p class="contrast-text">Hello World</p>
</div>
<button onclick="randomBg()">切换随机背景色</button>

CSS代码 #

.bg-box {
  /* 可替换为任意背景色/背景图 */
  background-color: #3498db;
  padding: 2rem;
  width: 300px;
}

.contrast-text {
  color: #ffffff;
  mix-blend-mode: difference;
  /* 强制将中间过渡色转为纯黑或纯白 */
  filter: grayscale(1) contrast(999);
  font-size: 2rem;
  margin: 0;
}

测试用JavaScript #

function randomBg() {
  const box = document.querySelector('.bg-box');
  const randomColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;
  box.style.backgroundColor = randomColor;
}

方案二：background-clip: text结合混合模式 #

利用文本裁剪和渐变背景，配合混合模式实现自动对比：

.contrast-text {
  background: linear-gradient(black 50%, white 50%) 0 0 / 200% 100%;
  background-clip: text;
  color: transparent;
  mix-blend-mode: difference;
  font-size: 2rem;
}

说明 #

• 方案一兼容性更好，支持绝大多数现代浏览器；
• 两种方案都能适配纯色背景、渐变背景甚至图片背景；
• 若不需要严格的纯黑/纯白，可去掉filter属性，仅保留mix-blend-mode: difference即可获得自然的高对比效果。

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