社区精选 | CSS如何根据背景颜色自动切换黑白文本？
今天小编给大家带来的是社区作者的文章。 让我们一起学习CSS吧。
在项目中，我们经常会遇到背景颜色不确定的场景。 为了使内容文字清晰可见，文字与背景之间需要有足够的对比度。 换句话说，当背景是深色的时候，文字是白色的，当背景是浅色的时候，文字是黑色的，像这样：
通常这种情况下，你可能会使用js来计算背景颜色的深度（灰度）。 该算法是公开的。 如果已知颜色的RGB值，则可以通过以下方式获得颜色灰度
luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
这样可以得到一个0~1之间的范围值，可以根据需求，设定一个阈值，超过表示为浅色，否则为深色。
原理就是这样，这里就不多介绍了。
那么，纯CSS也能达到这样的效果吗？ 当然可以，而且实现也比较简单，我们来看看。
1.CSS过滤器实现
实现这种效果需要使用 CSS 过滤器。
假设有这样的HTML
由于过滤器用于单独处理文本，因此需要额外的标签层。
然后，容器和文本用相同的颜色表示。 目的是将文本颜色与背景关联起来。 这可以通过以下方式实现
.box{
color: #ffeb3b;
background-color: currentColor;
}
接下来，你可以想想如何将彩色文字变成黑白？
当谈到黑白时，你可以想到灰度滤镜（）。 相信前几天大家都已经用过了。 这可以将彩色文本转换为灰色。
.text{
filter: grayscale(1)
}
效果如下
这样，文字颜色就从原来的黄绿色变成了浅灰色。
不过这个灰色在现在的背景下太难看清楚了。 我们需要的是纯黑或纯白，现在只是灰色。 如何“强化”呢？
这时，我们可以使用对比滤镜（）并在前一层之上添加另一层。
.text{
filter: grayscale(1) contrast(999)
}
这里的对比度比较大，会大大增强对比度。 黑色会更暗，白色会更白。
如果是浅灰色，就会变成白色。 如果是深灰色，就会变成黑色。 效果如下
这样看也不是太明显。 让我们改变背景颜色。
终于，还剩一步了。 由于前面的操作是通过滤镜将原始颜色转换为自身对应的白色或黑色，但效果相反，所以需要使用反转滤镜（ ）来反转黑白。
.text{
filter: grayscale(1) contrast(999) invert(1)
}
效果如下
下面用一张图来表示转换过程。
下面是任意颜色的适配效果，相当完美。
代码很简单，就一行
.text{
filter: grayscale(1) contrast(999) invert(1)
}
完整代码可以在下面的任意链接查看
2.其他CSS想法
除了上面的方法之外，还可以通过CSS变量来实现，稍微复杂一些。
这里简单介绍一下实现思路
将颜色 RGB 值拆分为 3 个独立的 CSS 变量
使用灰度算法和CSS计算函数计算灰度
利用得到的灰度和阈值进行差值，通过HSL模式转换为纯黑和纯白
有兴趣的可以参考张新旭老师的这篇文章：CSS前后台自动配色技术简介（）。 可以看到整体实现与js逻辑几乎一致。 以下是完整的实现。
也可以参考这篇之前的文章：CSS可变自动变色技术（）
:root {
/* 定义RGB变量 */
--red: 44;
--green: 135;
--blue: 255;
/* 文字颜色变色的临界值，建议0.5~0.6 */
--threshold: 0.5;
}
.btn {
/* 按钮背景色就是基本背景色 */
background: rgb(var(--red), var(--green), var(--blue));
/**
* 使用sRGB Luma方法计算灰度（可以看成亮度）
* 算法为：
* lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
*/
--r: calc(var(--red) * 0.2126);
--g: calc(var(--green) * 0.7152);
--b: calc(var(--blue) * 0.0722);
--sum: calc(var(--r) + var(--g) + var(--b));
--lightness: calc(var(--sum) / 255);
/* 设置颜色 */
color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
}
效果如下
与之前的实现相比，该实现更加灵活，可以节省一层标签。
另外，CSS正在起草一个颜色对比函数color-，它可以自动从几种颜色中选择对比度最高的一种。 实现如下
.text-contrast-primary {
color: color-contrast(var(--theme-primary) vs white, black);
}
但是，尚无浏览器支持。
如果将来支持的话，这将是最终的解决方案。
3.优缺点总结
总的来说，在支持color-功能之前，我更喜欢CSS滤镜的方式，它有以下优点：
代码很简单，一行代码，3个
对颜色格式没有要求，无需转换为RGB模式
无需了解色彩算法，设计更友好
当然，也存在一些不足之处
需要单独的标签层，并且使用场景可能受到限制。
对颜色高度敏感，否则无从下手
颜色转换有限制。 最终只能是黑白，其他颜色也无可奈何。
让我们回顾一下所使用的三个过滤器并对其进行总结。
灰度滤镜（ ），可以将彩色文本转换为灰色
对比度滤镜 ( ) 可以大大增强对比度。 黑色会更暗，白色会更白。 如果是浅灰色，就会变成白色。 如果是深灰色，就会变成黑色。
反转滤镜 ( )，可以翻转颜色和反转黑白
重新体验色彩转换过程
你记得吗？ 最后，如果您觉得不错，对您有帮助，请点赞、收藏、转发❤❤❤
