【总结】1549- CSS 如何根据背景色自动切换黑白文字?
在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:
通常这种情况,大家可能会通过 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)
}
效果如下
这样文字颜色由原来的黄绿色变成了浅灰色。
但是,这种灰色在现在这种背景下太难看清了,我们需要的是纯正的黑色或者白色,现在只是灰色,如何“加强”一下呢?
这时,我们可以用到对比度滤镜(contrast
),在前面的基础上再叠加一层
.text{filter: grayscale(1) contrast(999)
}
这里的对比度给的比较大,这样就会极大的增强对比度,黑的更黑,白的更白,如果是浅灰,那就变成白色,如果是深灰,那就变成黑色,效果如下
这样能还不太明显,我们把背景色换一下
最后,还差一步,由于前面的操作是将原有颜色经过滤镜转换成了和自身相对应的白色或者黑色,但是是相反的,所以需要用到反转滤镜(invert
),颠倒黑白
.text{filter: grayscale(1) contrast(999) invert(1)
}
效果如下
下面用一张图来表示转换过程
下面是任意颜色的适配效果,还是挺完美的
代码很简单,就这么一行
.text{filter: grayscale(1) contrast(999) invert(1)
}
完整代码可以查看以下任意链接
CSS auto-color (juejin.cn)[1]
CSS auto-color (codepen.io)[2]
CSS auto-color (runjs.work)[3]
二、CSS 其他思路
除了上面这种方式,还可以通过 CSS 变量来实现,要复杂一些。
这里简单介绍一下实现思路
将颜色
RGB
值拆分成 3 个独立的 CSS变量通过灰度算法,用 CSS 计算函数算出灰度
用得到的灰度和阈值做差值,通过
hsl
模式转换成纯黑和纯白
有兴趣的可以参考张鑫旭老师的这篇文章:CSS前景背景自动配色技术简介[4],可以看到,整体实现和 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%));
}
效果如下
相比前面的实现而言,实现更加灵活,可以少一层标签。
另外,CSS 正在起草一个颜色对比函数color-contrast
,可以从几个颜色中自动选择对比度最高的那个,实现是这样的
.text-contrast-primary {color: color-contrast(var(--theme-primary) vs white, black);
}
不过,现在还没有任何浏览器支持。
如果将来支持了,这将是终极解决方案。
三、优缺点总结
总的来说,在color-contrast
函数支持之前,我更推荐 CSS 滤镜方式,有以下几点好处
代码简洁,就一行代码,3 个滤镜
对颜色格式无任何要求,无需转换成
RGB
模式无需了解颜色算法,对设计更为友好
当然,也是存在一些缺点
需要单独一层标签,使用场景可能有限制
对颜色敏感度较高,不然无从下手
颜色转换有限制,最终只能是黑白,其他颜色就无能为力了
下面来回顾一下用到的3个滤镜,总结一下
灰度滤镜(
grayscale
),可以将彩色的文字转换成灰色对比度滤镜(
contrast
),可以极大的增强对比度,黑的更黑,白的更白,如果是浅灰,那就变成白色,如果是深灰,那就变成黑色反转滤镜(
invert
),可以翻转颜色,颠倒黑白
重新体会颜色转换过程
你记住了吗?最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发❤❤❤
参考资料
[1]
CSS auto-color (juejin.cn): https://code.juejin.cn/pen/7180639403566448698
[2]
CSS auto-color (codepen.io): https://codepen.io/xboxyan/pen/bGjVbGj
[3]
CSS auto-color (runjs.work): https://runjs.work/projects/bb844abe80da401d
[4]
CSS前景背景自动配色技术简介: https://www.zhangxinxu.com/wordpress/2018/11/css-background-color-font-auto-match/
往期回顾
#
如何使用 TypeScript 开发 React 函数式组件?
#
11 个需要避免的 React 错误用法
#
6 个 Vue3 开发必备的 VSCode 插件
#
3 款非常实用的 Node.js 版本管理工具
#
6 个你必须明白 Vue3 的 ref 和 reactive 问题
#
6 个意想不到的 JavaScript 问题
#
试着换个角度理解低代码平台设计的本质
【总结】1549- CSS 如何根据背景色自动切换黑白文字?相关推荐
- 背景色自动切换html,css3动画之背景颜色的自动切换
因为不同浏览器内核的不同所以会产生浏览器兼容性问题 背景颜色的变换 div{ width: 200px; height: 200px; background: blue; animation:myfi ...
- electron tray icon mac 上跟随菜单背景色自动改变黑白图标
mac系统菜单颜色跟深色浅色主题无关,而是跟壁纸颜色有关,我们只需要把 tray icon 图标的文件名以 Template 结尾即可,系统自动识别并在需要切换颜色的时候切换,图标只需要准备白色 pn ...
- 完成输入框自动切换对应的中文或英文输入法
CSS文本框输入法自动切换2009-12-26 11:34<html> <input id="test1" name="test1" styl ...
- [css] 如何在白天和黑夜自动切换页面的颜色?
[css] 如何在白天和黑夜自动切换页面的颜色? 媒体查询的内容都是设备的属性:宽度高度,旋转方向,打印样式,分辨率 所以用媒体查询的话,需要用户的设备拥有切换黑暗模式的功能 借助 js 切换页面颜色 ...
- H5+CSS+JS Tab导航栏自动切换
传智播客教材案例功能删改 html5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"" ...
- html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变 效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
- 网页自动切换html css js,HTML页面自动清理js、css文件的缓存(自动添加版本号)_HTML/Xhtml_网页制作...
这篇文章主要介绍了HTML页面自动清理js.css文件的缓存(自动添加版本号),小编觉得挺不错的,现在分享给大家HTML源码,也给大家做个参考.对HTML感兴趣的小伙伴们一起跟随小编过来看看吧 在we ...
- html5 背景图片自动换,网站背景图片自动切换特效css代码
背景图片自动切换特效-sbkko.com body { background: #000; background-attachment: fixed; word-wrap: break-word; - ...
- html制作自动切换音乐按钮代码,HTML5+JavaScript+CSS实现音乐播放器——难点二:自己设计一个控制音乐播放的控制器...
我们都知道HTML5给我们提供了"controls"这个插件,可是这个插件却比较丑,还不能实现上一首下一首的播放,以及进度条的手动改变等功能,那么如何自己设计一个控制音乐播放的控制 ...
- JQury自动切换图片
[标签]Jquery图片自动切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
最新文章
- CoffeeScript 存在操作符“?” 详解
- 登录功能和公聊功能的实现
- DataUml Design 教程6-DataUML Design 1.1版本号正式公布(支持PD数据模型)
- Dependence Injection
- Adobe Livecycle ES Workbench
- 什么是ASP.NET Boilerplate Project(ABP)框架
- php计算昨天,php时间计算,明天,昨天,前天,上周,本周,上月等等
- JNI_Android项目中调用.so动态库实现详解【转】
- 苹果第一财季营收1239亿美元 iPhone、Mac及服务营收均创下新高
- wits数据格式_WITS标准
- 智慧屏鸿蒙系统简介,首发鸿蒙系统,荣耀智慧屏是何方神圣?
- 视频方向的变换by ppt
- iphone长截图哪个软件好_iPhone上最好的长截图工具!
- Rasa 文档 中英文翻译版本 3 - Tutorial: Building Assistants
- 服务器白屏是系统在更新吗,远程服务器白屏怎么处理
- nodejs+vue高校教室管理系统
- 列向量和行向量看待矩阵乘法
- 让古天乐心动的这位女星,鼻子塌却美得风华绝代
- KYC (Know Your Customer) 详述篇 下
- akka java ask_Akka Stream之集成
热门文章
- 电脑一族的饮食建议法
- 华为路由交换精讲系列20:OSPF技术精讲 [肖哥]视频课程-肖宗鹏-专题视频课程
- 电脑出现错误代码0x0000011b怎么办,一键修复0x0000011b
- android 防丢器 ibeacon
- DBCO衍生物 DBCO-PEG4-Propionic-Val-Cit-PAB
- 关于MIUI中cit.apk暴露bugreport的漏洞
- python菜单栏不见了_[Python自学] PyQT5-菜单栏、工具栏、状态栏
- Android-MTK平台功能需求解决:客户电池NTC功能(高低温报警功能)--第3天(已解决)
- 眼睑痉挛三个阶段的不同危害
- SunCertPathBuilderException: unable to find valid