直播app源码，实现文字颜色自适应背景

在直播app源码开发时，可以使用 CSS 相对颜色，实现文字颜色自适应背景
相对颜色，还有一个非常有意思的场景 – 让文字颜色能够自适应背景颜色进行展示。

有这么一种场景，有的时候，无法确定文案的背景颜色的最终表现值（因为背景颜色的值可能是后台配置，通过接口传给前端），但是，我们又需要能够让文字在任何背景颜色下都正常展现（譬如当底色为黑色时文字应该是白色，当背景为白色时，文字应该为黑色）。

像是这样：

 在不确定背景颜色的情况下，无论什么情况，文字颜色都能够适配背景的颜色。

在之前，纯 CSS 没有特别好的方案，可以利用 mix-blend-mode: difference 进行一定程度的适配：

div {
    // 不确定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

实操过这个方案的同学都会知道，在一定情况下，前景文字颜色还是会有一点瑕疵。并且，混合模式这个方案最大的问题是会影响清晰度。

有了 CSS 相对颜色后，我们有了更多的纯 CSS 方案。

利用 CSS 相对颜色，反转颜色
我们可以利用相对颜色的能力，基于背景色颜色进行反转，赋值给 color。

一种方法是将颜色转换为 RGB，然后从 1 中减去每个通道的值。

代码非常简单：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b));  /** 基于背景反转颜色 **/
}

用 1 去减，而不是用 255 去，是因为此刻，会将 rgb() 表示法中的 0~255 映射到 0~1。

效果如下：

 

配个动图，我们利用背景色的反色当 Color 颜色，适配所有背景情况：

 当然，这个方案还有两个问题：

1、如果颜色恰好是在 #808080 灰色附近，它的反色，其实还是它自己！会导致在灰色背景下，前景文字不可见；
2、绝大部分情况虽然可以正常展示，但是并不是非常美观好看
为了解决这两个问题，CSS 颜色规范在 CSS Color Module Level 6 又推出了一个新的规范 – color-contrast()。

利用 color-contrast()，选择高对比度颜色

color-contrast() 函数标记接收一个 color 值，并将其与其他的 color 值比较，从列表中选择最高对比度的颜色。

利用这个 CSS 颜色函数，可以完美的解决上述的问题。

我们只需要提供 #fff 白色和 #000 黑色两种可选颜色，将这两种颜色和提供的背景色进行比较，系统会自动选取对比度更高的颜色。

改造一下，上面的代码，它就变成了：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: color-contrast(var(--bg) vs #fff, #000);  /** 基于背景色，自动选择对比度更高的颜色 **/
}

 

这样，上面的 DEMO 最终效果就变成了：

 

此方案的优势在于：

1、可以限定前景 color 颜色为固定的几个色值，以保证 UI 层面的统一及美观
2、满足任何情况下的背景色
当然，唯一限制这个方案的最大问题在于，当前，color-contrast 还只是一个实验室功能，未大规模被兼容。

以上就是直播app源码，实现文字颜色自适应背景， 更多内容欢迎关注之后的文章