如何用CSS的mix-blend-mode实现文字在红/白背景间切换红白颜色？

为什么当前效果不符合预期？ #

mix-blend-mode: difference是按RGB通道取绝对值差计算颜色：结果通道 = |元素通道值 - 背景通道值|

你设置文字为红色（#ff0000）：

• 在红色背景上，所有通道差值为0，显示黑色
• 在白色背景上，绿、蓝通道差值为255，显示青色（也就是你看到的蓝色）

这和你想要的红/白切换效果不符。

实现红背景白字、白背景红字的方案 #

可以用双层文字配合不同混合模式，让对应背景下的文字自动显示：

.page {
  min-height: 800px;
}

.red {
  background: red;
  min-height: 150px;
}

.white {
  background: white;
  min-height: 150px;
}

.fixy {
  position: fixed;
  top: 0;
}

.fixy p {
  margin: 0;
  position: absolute;
  top: 0;
}

.text-red {
  color: red;
  mix-blend-mode: multiply;
}

.text-white {
  color: white;
  mix-blend-mode: screen;
}

<body class="page">
  <div class="red"></div>
  <div class="white"></div>
  <div class="red"></div>
  <div class="fixy">
    <p class="text-red">RED TYPE</p>
    <p class="text-white">RED TYPE</p>
  </div>
</body>

原理说明 #

• 红色文字用multiply模式：在白色背景上，红色与白色相乘保留红色；在红色背景上，红色与红色相乘结果还是红色，但会被上层的白色文字覆盖
• 白色文字用screen模式：在红色背景上，白色与红色叠加显示白色；在白色背景上，白色与白色叠加结果为白色，但会被下层的红色文字覆盖

这样就能实现红背景显示白字、白背景显示红字的效果。

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