CSS之根据背景色自动切换黑白文字

CurrentColor 属性使背景与文字颜色相同。容器和文字用同一种颜色表示，目的是让文字颜色和背景相关联，可以通过currentColor实现
使用灰度滤镜（grayscale），这样可以将彩色的文字转换成灰色。
我们可以用到对比度滤镜（contrast），在前面的基础上再叠加一层。这里的对比度给的比较大，这样就会极大的增强对比度，黑的更黑，白的更白，如果是浅灰，那就变成白色，如果是深灰，那就变成黑色。
由于前面的操作是将原有颜色经过滤镜转换成了和自身相对应的白色或者黑色，所以需要用到反转滤镜（invert），颠倒黑白。

<!DOCTYPE html>
<html>
<head>
    <title>背景测试</title>
</head>
<body>
    <div class="box">
        <span class="text">前端背景</span>
    </div>
    <style>
        .box {
            color: #4f3bff;
            background-color: currentColor;
        }
        .text{
            filter: grayscale(1)contrast(999)invert(1)
        }
    </style>
</body>
</html>

展示效果

浅色背景深色文字.png

深色背景白色文字.png