CSS 彩色背景混合在文本上

编程问答 2022-05-31

问题描述

我已经尝试了几天在具有相同颜色的文本上混合彩色背景，并最终将混合文本变成白色。这是我设法仅用黑白存档的示例：

Current Behaviour

但是一旦我将文本和背景的颜色从黑色更改为 - 例如 - 蓝色，文本不会变成白色而是黄色或其他颜色。

我使用了 CSS mix-blend-mode exclusion。

A working example with black and white can currently be found here。我的目标是用蓝色和白色的按钮替换黑白主按钮。

解决方法

如果我们考虑 mix-blend-mode difference，这需要背景颜色和内容颜色之间的差异。

因此，如果我们将文本设为蓝色，即 rgb(0,255) 变为白色，我们需要将其与 rgb(255,255,0) 区分开来。

相反，如果我们的文本是 rgb(255,0) 并且我们将它与白色的 rgb(255,255) 区别开来，我们会得到 rgb(0,255)，它是蓝色的。

因此，我们为文本赋予 rgb(255,0) 颜色，并要求它与白色背景混合，从而得到蓝色。然后当我们覆盖蓝色时，我们将得到白色文本。

这是片段。我没有提供波动性，这将成为另一个问题的主题。

更新：从评论中可以看出，到目前为止在 Windows10 和 IOS 上的结果看起来还不错，但在 MACOS 上看到了可变结果，文本在 Chrome 和 Safari 中呈现出一些苍白的颜色，尽管在 Firefox 上为白色.解释上的差异（尤其是混合模式和背景混合模式之间）需要进一步调查。

body  {
  position: relative;
  background-color: rgb(255,255);
  width: 100vw;
  height: 100vh;
}

@keyframes updown {
  0% {
    height: 0;
    top: 200px;
  }
  50% {
    height: 200px;
    top: 0;
  }
  100% {
    height: 0;
    top: 200px;
  }
}
  
.background {
  position: absolute;
  background-color: rgb(0,255);
  width: 400px;
  height: 200px;
  animation: updown 10s ease infinite;
}

.text {
  position: absolute;
  font-family: sans-serif;
  width: 400px;
  color: rgb(255,0);/* complement of blue */
  mix-blend-mode: difference;
  text-align: center;
  font-size: 50px;
}
<div class="background"></div>
  <div class="text">Primary button</div>

htmlmix-blend-mode