css - 混合混合模式与白色和蓝色

Question

假设我有一个蓝色和白色的背景。我希望我的文本在背景为白色时为黑色，然后在背景为蓝色时为白色。

我试过:

mix-blend-mode: difference;

当它超过白色时它会起作用(给我黑色文本)。但它给了我黄色的文字。

这是我现在所拥有的，已经很接近了:

Answer 1

不幸的是，mix-blend-mode 并没有真正提供任何完全您正在寻找的选项。

差异:这会从最亮的颜色中减去两种颜色中较暗的颜色。

所以...如果您的背景颜色是蓝色 rgb(0,0,255); 并且您的文本颜色是白色 rgb(255,255,255); 剩下的是黄色rgb(255,255,0);

所以，如果我们使用黄色文本......我们会得到蓝底白字和白底蓝字......它不是黑色，但这是我能做的最好的。

JSFiddle Demo

body {
  background: rgb(0, 0, 255);
  overflow: hidden;
}
body::before {
  content: 'o';
  font: bold 800px'Times', 'Times New Roman';
  color: white;
  position: absolute;
  left: -.25em;
  top: -.45em;
}
h1 {
  font-size: 40px;
  margin: 3em -3em 0 1em;
  mix-blend-mode: difference;
  color: rgb(255, 255, 0);
}

<h1>Welcome to the fiddle</h1>

就入门 fiddle 向 Lister 先生致敬。