CSS如何根据背景颜色自动切换黑白文本？

因为过滤器是用来单独处理文本的，所以需要多加一层标签.然后，容器和文字用同一种颜色表示，目的是让文字颜色和背景相关，可以通过currentColor.box{color:#ffeb3b;来实现。background-color:currentColor;}接下来，你可以想想如何让彩色文字变成黑白？说到黑白，大家可以想到灰度滤镜（grayscale）。相信你前几天用过，可以把彩色文字变成灰色。text{filter:grayscale(1)}效果如下，让文字颜色由原来的黄绿色变成浅灰色。不过，这种灰在现在的背景下，实在是太难看清了。我们需要的是纯黑或纯白。现在它只是灰色的。如何“增强”它？这时候我们可以使用对比滤镜（contrast），在之前的基础上再增加一层。text{filter:grayscale(1)contrast(999)}这里的对比度比较大，会极大的增强对比度，黑色更黑，白色更白，如果是浅灰就会变成白色，如果是深灰色，会变成黑色，效果如下，所以不是太明显，我们把背景色改一下最后，还剩下一步，因为前面的操作是把原来的颜色转换成对应的白色或者黑色通过filter给自己，但是是相反的，所以需要用一个invertfilter（反转）来反转黑白.text{filter:grayscale(1)contrast(999)invert(1)}效果如下如下。用一张图来表示转换过程。下面是任意颜色的适配效果，还是比较完美的。代码很简单，就一行。text{filter:grayscale(1)contrast(999)invert(1)}完整代码可以在以下任一链接查看CSSauto-color(codepen.io)二、其他CSS思路除了上面的方法，你也可以使用CSS变量来实现，稍微复杂一点。这里简单介绍一下实现思路。将颜色RGB值拆分为三个独立的CSS变量。通过灰度算法，使用CSS计算函数计算灰度。利用得到的灰度和阈值做差值，通过hsl方式转换成纯黑和纯黑。对纯白色感兴趣的可以参考张新旭老师的这篇文章：CSS前景背景自动配色技术介绍。可以看到整体实现和js逻辑差不多。以下是完整的实现。另外可以参考之前的文章：CSS变量自动换色技术：root{/*定义RGB变量*/--red:44;--绿色：135；--蓝色：255；/*文字颜色变化的阈值，建议0.5~0.6*/--threshold:0.5;}.btn{/*按钮背景色为基本背景色*/background:rgb(var(--red),var(--green),var(--blue));/***使用sRGBLumaMethod计算灰度（可以看作亮度）*算法为：*lightness=(red*0.2126+green*0.7152+blue*0.0722)/255*/--r:calc(var(--红色)*0.2126);--g:计算(var(--green)*0.7152);--b:计算(var(--blue)*0.0722);--sum:计算(var(--r)+var(--g)+var(--b));--lightness:calc(var(--sum)/255);/*setcolor*/color:hsl(0,0%,calc((var(--lightness)-var(--threshold))*-999999%));}效果如下与之前的实现相比，实现更灵活，可以少一个标签。另外，CSS正在起草一个颜色对比函数color-contrast，可以自动从几种颜色中选择对比度最高的一种。实现类似于this.text-contrast-primary{color:color-contrast(var(--theme-primary)vswhite,black);}但是，目前还没有浏览器支持。如果将来支持，这将是最终的解决方案。3.优缺点总结总的来说，在不支持color-contrast功能之前，我比较推荐cssfilter的方式，它有以下优点：代码简洁，一行代码而已，三个filter没有对颜色格式没有任何要求，不需要转换为RGB模式不需要知道颜色算法，对设计更友好。当然也有一些缺点需要单独一层标签。使用场景可能会有限制。对颜色的敏感度高，不然无从下手。颜色转换是有限制的，最后只能是黑白，其他颜色什么都做不了。回顾一下用到的三个滤镜，总结一下灰度滤镜（grayscale），可以将彩色文本转换成灰色对比滤镜（contrast），可以大大增强对比度，黑色更黑，白色更白，如果是浅灰色就变成白色，如果是深灰色就变成黑色Invertfilter（反转），可以反转颜色，反转黑白来体验颜色转换又记得这个过程吗？最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注我的公众号：前端大侦探