神奇的 CSS,让文字智能适配背景颜色
最近几天,有好几个同学都问了同样一个问题。
页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色。像是下面这样:
文本在黑色底色上表现为白色,在白色底色上表现为黑色。看似很复杂的一个效果,但是其实在 CSS 中非常好实现,今天就介绍这样一个小技巧,在 CSS 中,利用混合模式 mix-blend-mode: difference
,让文字智能适配背景颜色。
混合模式 mix-blend-mode: difference
CSS3 新增了一个很有意思的属性 -- mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。一共有下图所示的一些混合模式:
其中,本文的主角是 mix-blend-mode: difference
,意为差值模式。该混合模式会查看每个通道中的颜色信息,比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。
与白色混合将使底色反相;与黑色混合则不产生变化。
通俗一点就是上方图层的亮区将下方图层的颜色进行反相,暗区则将颜色正常显示出来,效果与原图像是完全相反的颜色。
该混合模式最常见的应用场景就是文章开头描述的场景,实现文本在不同背景色下展示不同的颜色。
最适合于黑白场景,非常简单的一个 DEMO:
<div></div>
div {height: 100vh;background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);&::before {content: "LOREM IPSUM";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;mix-blend-mode: difference;animation: move 3s infinite linear alternate;}
}
@keyframes move {0% {transform: translate(-30%, -50%);}100% {transform: translate(-70%, -50%);}
}
效果如下:
CodePen Demo -- linear-gradient + Mix-blend-mode[1]
当然,不一定是黑色或者白色,看看下面这个例子,有这样一种场景,有的时候我们不太确定背景颜色的最终表现值(可能是后台配置,传给前端),但是又需要让文字能够在任何背景颜色下都正常展出,此时,也可以尝试使用 mix-blend-mode: difference
。
<ul class="flex-box"><div class="box"><p>开通会员查看我的VIP等级</p></div>// .....
</ul>
div {// 不确定的背景色
}
p {color: #fff;mix-blend-mode: difference;
}
无论背景色是什么颜色,设置了 mix-blend-mode: difference
的 <p>
元素都可以正常展示出文本:
CodePen Demo -- mix-blend-mode:difference实现文字颜色自适应底色[2]
mix-blend-mode:difference 的缺点
当然,这个方法不是完美的,因为通过 mix-blend-mode:difference
与底色叠加之后的颜色,虽然能够正常展示,但是不一定是最适合的颜色,展示效果的最好的颜色。
这里实际使用的时候,在非黑白场景下,还需要多加实验加以取舍。
参考资料
[1]
CodePen Demo -- linear-gradient + Mix-blend-mode: https://codepen.io/Chokcoco/pen/eYeQpZx
[2]
CodePen Demo -- mix-blend-mode:difference实现文字颜色自适应底色: https://codepen.io/Chokcoco/pen/EJgEzL
[3]
不可思议的混合模式 mix-blend-mode: https://github.com/chokcoco/iCSS/issues/16
[4]
不可思议的混合模式 background-blend-mode: https://github.com/chokcoco/iCSS/issues/31
[5]
两行 CSS 代码实现图片任意颜色赋色技术: https://github.com/chokcoco/iCSS/issues/32
[6]
巧用 CSS 构建渐变彩色二维码: https://github.com/chokcoco/iCSS/issues/167
[7]
CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果: https://github.com/chokcoco/iCSS/issues/140
[8]
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题: https://github.com/chokcoco/iCSS/issues/41
[9]
CSS 艺术 -- 使用 background 创造各种美妙的背景: https://github.com/chokcoco/iCSS/issues/84
[10]
Github -- iCSS: https://github.com/chokcoco/iCSS
神奇的 CSS,让文字智能适配背景颜色相关推荐
- 前端基础(五)_CSS文本文字属性、背景颜色属性
CSS文本文字属性 1.文字属性 1.1.字号 font-size:38px; 浏览器默认16px; 1.2.字体 font-family: 如果字体名称包含空格,字体名称上加引号: 中文字体名称加引 ...
- CSS(七)——设置背景颜色和背景图像
目录 1.设置背景颜色 2.设置背景图片 3.设置背景图像位置 4.设置背景图片位置固定 1.设置背景
- html字体加粗字号为2,【css】文字基本样式(颜色、倾斜、加粗、字号、行高、字体)...
一.字体基本样式 首先我们先放置一些文字,基本所有的标签都可以设置字体样式的,这里就使用标签 和 来做示范啦. O泡时间到! 给我O泡给我O泡,O泡果奶OOO! 图1 基本文字效果 注意,文字属性都是 ...
- css背景色动画从无到有,css3背景颜色渐变动画
通过背景定位来实现 background-position * { margin: 0; padding: 0; } body { margin: 0; width: 100%; height: 10 ...
- css在文字前面设置带颜色的小方块样式
<a-divider orientation="left" class="category"><label>纳入全省食用农产品合格证管理 ...
- css实现文字颜色适配背景
首先,提供一个渐变容器 , 子元素为一段文字 , 一部分内容背景挡住了 我们希望文字能根据背景颜色而动态变化 , 即使加入了hover效果也是如此 css中有一个属性mix-blend-mode 我 ...
- html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇. 此DIV CSS ...
- css3的nth为什么不生效,CSS:nth-child(偶数)选择器背景颜色不起作用
我试图在两行上均匀地使用:nth-child(even)来显示背景颜色,它不起作用,但它在jsfiddle.net上工作(没有javascript生成表格).CSS:nth-child(偶数)选择 ...
- HTML示例01---设置背景颜色
本来是想用用蚂蚁金服开源的前端框架:Ant Design Pro,地址:https://pro.ant.design/index-cn,这个框架很厉害的,开箱即用的中台前端/设计解决方案,你可以用较低 ...
最新文章
- Kotlin 使用list.add 时候报错的处理方法
- iptables7层过滤,屏蔽(QQ,MSN,迅雷,PPTV等)
- python适合零基础学习吗-零基础,经济学专业,适合自学Python吗?
- 重磅:Swagger3.0 官方 starter 诞生了,其它的都可以扔了~
- Spring核心部分之AOP,aspectJ框架实现AOP,切入点表达式
- 上海计算机协会竞赛平台——整除
- Microsoft Windows 7.0 build 7000 NAP测试--健康状态检测验证报告
- .NET5都来了,你还不知道怎么部署到linux?最全部署方案,总有一款适合你
- python编程(编写opengl程序)
- 内联元素转化为内联块元素的一些小细节
- 190113每日一句
- Java并发编程基础(一篇入门)
- python自动发微信朋友圈不带图片_python itchat实现微信自动检测违规涉黄图片
- R语言伴随矩阵的计算
- 2017年节假日放假安排来了!
- Wireshark抓取VLAN包
- ZOJ 1789 The Suspects(经典并查集)
- mipi两线接口_什么是MIPI接口
- Linux内核:一文搞懂外设I/O内存资源的静态映射方式
- 嵌入式Linux--U-Boot(三)Boot命令使用