使文本颜色与动态背景颜色相反？

【问题标题】：Make text color the inverse of dynamic background color?使文本颜色与动态背景颜色相反？
【发布时间】：2021-12-29 15:46:45
【问题描述】：

在 Palantir.com 网站上，徽标的颜色（最初为黑色）始终与其背后的背景颜色相反，即使背景滚动/变化。

我正在通过 Wordpress 创建一个网站，并希望获得相同的效果。我尝试过使用“mix-blend-mode: exclude;”，虽然类似，但没有给出正确颜色反转的 true 效果。

如何在 CSS 中做到这一点？谢谢！

【问题讨论】：

标签： html css wordpress

【解决方案1】：

mix-blend-mode: difference 将字体颜色设置为白色可能会有所帮助。

白色与白色的区别是0 - 即黑色。

蓝色和白色的区别是 rgb(255, 255, 0) 即黄色。

body {
  background-image: linear-gradient(white 0 30px, blue 30px 100%);
  width: 100vw;
  height: 100vh;
}

.text {
  mix-blend-mode: difference;
  color: white;
  font-size: 60px;
}

<body>
  <div class="text">SOME TEXT</div>
</body>

虽然灰色可能会出现问题 - 您最终可能会得到灰色上的灰色，因此这在一定程度上取决于您的底层图像实际上是什么样的，这是否足够令人满意。（一个技巧是对文本应用轻微的阴影）。

【讨论】：

知道了，谢谢！