头图

CSS 如何根据背景色自动切换黑白文字?

欢迎关注我的公众号:前端侦探

在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:

image.png

通常这种情况,大家可能会通过 js 去计算背景色的深浅度(灰度),算法是公开的,如果已知颜色的RGB值,那么可以通过以下方式得到颜色灰度

luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255

这样可以得到一个0~1之间的范围值,可以根据需求,设定一个阈值,超过表示为浅色,否则为深色。

原理就是这样,这里就不多介绍了。

那么,纯 CSS 也能实现这样的效果吗?当然可以,而且实现更简单,一起看看吧

一、CSS 滤镜实现

实现这个效果需要用到 CSS 滤镜。

假设有 HTML 是这样的

<div class="box">
  <span class="txt">前端侦探</span>
</div>

因为要使用滤镜对文字单独处理,所以需要额外一层标签。

然后,容器和文字用同一种颜色表示,目的是让文字颜色和背景相关联,可以通过currentColor实现

.box{
  color: #ffeb3b;
  background-color: currentColor;
}

接下来可以想一下,如何让彩色文字变成黑白

提到黑白,可以想到灰度滤镜(grayscale),相信大家前几天都用到过,这样可以将彩色的文字转换成灰色

.text{
  filter: grayscale(1)
}

效果如下

image.png
这样文字颜色由原来的黄绿色变成了浅灰色。

但是,这种灰色在现在这种背景下太难看清了,我们需要的是纯正的黑色或者白色,现在只是灰色,如何“加强”一下呢?

这时,我们可以用到对比度滤镜(contrast),在前面的基础上再叠加一层

.text{
  filter: grayscale(1) contrast(999)
}

这里的对比度给的比较大,这样就会极大的增强对比度,黑的更黑,白的更白,如果是浅灰,那就变成白色,如果是深灰,那就变成黑色,效果如下

image.png

这样能还不太明显,我们把背景色换一下

image.png

最后,还差一步,由于前面的操作是将原有颜色经过滤镜转换成了和自身相对应的白色或者黑色,但是是相反的,所以需要用到反转滤镜(invert),颠倒黑白

.text{
  filter: grayscale(1) contrast(999) invert(1)
}

效果如下

image.png

下面用一张图来表示转换过程

image.png

下面是任意颜色的适配效果,还是挺完美的

Kapture 2022-12-23 at 14.43.29

代码很简单,就这么一行

.text{
  filter: grayscale(1) contrast(999) invert(1)
}

完整代码可以查看以下任意链接

二、CSS 其他思路

除了上面这种方式,还可以通过 CSS 变量来实现,要复杂一些。

这里简单介绍一下实现思路

  1. 将颜色RGB值拆分成 3 个独立的 CSS变量
  2. 通过灰度算法,用 CSS 计算函数算出灰度
  3. 用得到的灰度和阈值做差值,通过hsl模式转换成纯黑和纯白

有兴趣的可以参考张鑫旭老师的这篇文章:CSS前景背景自动配色技术简介,可以看到,整体实现和 js 逻辑几乎是一致的,下面是完整实现

另外可以参考之前这篇文章:CSS 变量自动变色技术
:root {
  /* 定义RGB变量 */
  --red: 44;
  --green: 135;
  --blue: 255;
  /* 文字颜色变色的临界值,建议0.5~0.6 */
  --threshold: 0.5;
}

.btn {
  /* 按钮背景色就是基本背景色 */
  background: rgb(var(--red), var(--green), var(--blue));

  /** 
   * 使用sRGB Luma方法计算灰度(可以看成亮度)
   * 算法为:
   * lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
  */
  --r: calc(var(--red) * 0.2126);
  --g: calc(var(--green) * 0.7152);
  --b: calc(var(--blue) * 0.0722);
  --sum: calc(var(--r) + var(--g) + var(--b));
  --lightness: calc(var(--sum) / 255);
  
  /* 设置颜色 */
  color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
}

效果如下

auto-color-button.gif (228×225) (zhangxinxu.com)

相比前面的实现而言,实现更加灵活,可以少一层标签。

另外,CSS 正在起草一个颜色对比函数color-contrast,可以从几个颜色中自动选择对比度最高的那个,实现是这样的

.text-contrast-primary {
  color: color-contrast(var(--theme-primary) vs white, black);
}

不过,现在还没有任何浏览器支持。

image-20221224174008923

如果将来支持了,这将是终极解决方案。

三、优缺点总结

总的来说,在color-contrast函数支持之前,我更推荐 CSS 滤镜方式,有以下几点好处

  1. 代码简洁,就一行代码,3 个滤镜
  2. 对颜色格式无任何要求,无需转换成 RGB模式
  3. 无需了解颜色算法,对设计更为友好

当然,也是存在一些缺点

  1. 需要单独一层标签,使用场景可能有限制
  2. 对颜色敏感度较高,不然无从下手
  3. 颜色转换有限制,最终只能是黑白,其他颜色就无能为力了

下面来回顾一下用到的3个滤镜,总结一下

  1. 灰度滤镜(grayscale),可以将彩色的文字转换成灰色
  2. 对比度滤镜(contrast),可以极大的增强对比度,黑的更黑,白的更白,如果是浅灰,那就变成白色,如果是深灰,那就变成黑色
  3. 反转滤镜(invert),可以翻转颜色,颠倒黑白

重新体会颜色转换过程

image-20221224165935410

你记住了吗?最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发❤❤❤

欢迎关注我的公众号:前端侦探

前端侦探
致力于有趣的前端探索~
13.3k 声望
13k 粉丝
0 条评论
推荐阅读
你可能不知道的dialog弹窗
想必大家都知道 HTML5 中有 dialog 这样一个标签,顾名思义,就是“弹窗”。除了有良好的语义外,随着浏览器的不断更新迭代,还出现了许多你可能不知道的特性,快速了解一下吧~

XboxYan8阅读 413

封面图
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木33阅读 6.2k评论 9

13.3k 声望
13k 粉丝
宣传栏