有时候在页面中，我们经常会碰到背景色不确定的场景，为了让内容文字足够清晰可见，通常当背景是深色时，文字为白色，当背景是浅色时，文字为黑色。

一般这种情况，可以通过 js 去计算背景色的深浅度（灰度），再赋值相应的黑或白字。

那么纯CSS能实现这样的效果吗？

当然可以，而且实现更简单，首先这个效果需要用到 CSS 滤镜，假设有HTML是这样的：

<div class="box">
  <span class="txt">Jdeal</span>
</div>

因为要使用滤镜对文字单独处理，所以需要额外一层标签。

然后，容器和文字共同使用同一种颜色，目的是让文字颜色和背景相关联，可以通过 currentColor 实现：

.box{
  color:yellow;
  background-color: currentColor;
}

接下来可以想一下，如何让彩色文字变成黑白？

提到黑白，可以想到灰度滤镜（grayscale），这样可以将彩色的文字转换成灰色：

.text{
  filter: grayscale(1);
}

这样文字颜色由原来的黄色变成了浅灰色。

但是，这种灰色在现在这种背景下太难看清了，我们需要的是纯正的黑色或者白色，现在只是灰色，如何“加强”一下呢？

这时，我们可以用到对比度滤镜（contrast），在前面的基础上再叠加一层：

.text{
  filter: grayscale(1) contrast(999);
}

这里的对比度给的比较大，这样就会极大的增强对比度，黑的更黑，白的更白，如果是浅灰，那就变成白色，如果是深灰，那就变成黑色。

最后，还差一步，由于前面的操作是将原有颜色经过滤镜转换成了和自身相对应的白色或者黑色，但是是相反的，所以需要用到反转滤镜（invert），颠倒黑白：

.text{
  filter: grayscale(1) contrast(999) invert(1);
}

下面用一张图来表示转换过程：

其实代码很简单，就两行：

.box 背景 {
  color:#ffeb3b;
  background-color:currentColor;
}
.text 文字 {
  filter:grayscale(1) contrast(999) invert(1);
}

OK，收工！