使用灰度应用mix-blend-mode

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>

​

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>

​