javascript - 背景和文本混合模式的区别

Question

我试图理解混合模式，所以我创建了这个简单的例子：

.container {
  background-color: gold;
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 20px;

}

.rect {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
  width: 15%;
}

.text {
  z-index: 1;
  font-weight: bold;
  font-size: 30px;
  font-family: 'Arial';
}

.left {
  color: white;
}

.right {
  color: grey;
}

<div class="container">
  <div class="rect" ></div>
  <div class="text left">Left text</div>
  <div class="text right">Right text</div>
</div>

有两种背景颜色（蓝色和金色）和两种应该始终可读的文本。我想要的是当背景为蓝色时有一个白色文本，当背景是黄色时有一个灰色文本（因为蓝色矩形可以增长）。

所以我尝试了：

.container {
  background-color: gold;
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 20px;

}

.rect {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
  width: 15%;
}

.text {
  z-index: 1;
  font-weight: bold;
  font-size: 30px;
  font-family: 'Arial';
  mix-blend-mode: difference;
}

.left {
  color: white;
}

.right {
  color: dimgrey;
}

<div class="container">
  <div class="rect" ></div>
  <div class="text left">Left text</div>
  <div class="text right">Right text</div>
</div>

这与我想要的相似，但不完全一样。你有想法吗？

标签： javascripthtmlcssmix-blend-mode