html - 应用灰度混合模式

Question

有没有办法应用mix-blend-mode: difference灰度？

背景可以是任何颜色，差异给我相反的文本颜色，这可能很难看。

此片段显示了问题：

.color {
  width: 100px
  height: 20px;
  padding: 5px;
}

.color > span {
  mix-blend-mode: difference;
  color: white;
}

<div class="color" style="background: #fff">
  <span>good</span>
</div>
<div class="color" style="background: #000">
  <span>good</span>
</div>
<div class="color" style="background: #0f0">
  <span>should be black or dark grey</span>
</div>
<div class="color" style="background: #00f">
  <span>should be white or light grey</span>
</div>
<div class="color" style="background: #f00">
  <span>should be white or light grey</span>
</div>

标签： htmlcss

Answer 1

这是使用过滤器的近似值。不确定它是否会涵盖所有情况。

.color {
  padding: 5px;
  background: currentColor;
}

.color>span {
  filter: invert(1)  saturate(0);
  font-weight: bold;
  font-size: 23px;
}

<div class="color" style="color: #fff">
  <span>good</span>
</div>
<div class="color" style="color: #000">
  <span>good</span>
</div>
<div class="color" style="color: #0f0">
  <span>should be black or dark grey</span>
</div>
<div class="color" style="color: #00f">
  <span>should be white or light grey</span>
</div>
<div class="color" style="color: #f00">
  <span>should be white or light grey</span>
</div>