如何在背景变化时让文本仅显示黑/白色以实现最大对比度？

要解决mix-blend-mode: difference导致文本显示彩色相反色的问题，同时让文本仅显示纯黑或纯白以达到最大对比度，可以通过添加滤镜来实现：

.custom-blend-mode {
  mix-blend-mode: difference;
  filter: grayscale(1) contrast(999);
}

核心逻辑： #

• grayscale(1) 将差异模式生成的彩色文本转换为灰度色调
• contrast(999) 把灰度值极端化，所有接近白色的色调会被转为纯白，接近黑色的色调转为纯黑，实现绝对的高对比度

如果需要考虑旧浏览器兼容性，可以用@supports做降级处理：

.custom-blend-mode {
  color: #000; /* 默认黑色文本 */
}

@supports (mix-blend-mode: difference) and (filter: grayscale(1)) {
  .custom-blend-mode {
    color: #fff; /* 配合差异模式的基础白色 */
    mix-blend-mode: difference;
    filter: grayscale(1) contrast(999);
  }
}

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