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

问题描述

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

.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>

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）