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