直播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源码,实现文字颜色自适应背景, 更多内容欢迎关注之后的文章

posted @ 2025-04-12 09:55  云豹科技-苏凌霄  阅读(19)  评论(0)    收藏  举报