神奇的 CSS,让文字智能适配背景颜色

简介: 神奇的 CSS,让文字智能适配背景颜色

最近几天,有好几个同学都问了同样一个问题。


页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色。像是下面这样:


0a211ef4e62a4f438b2c67dda076cc13_tplv-k3u1fbpfcp-watermark.gif



文本在黑色底色上表现为白色,在白色底色上表现为黑色。看似很复杂的一个效果,但是其实在 CSS 中非常好实现,今天就介绍这样一个小技巧,在 CSS 中,利用混合模式 mix-blend-mode: difference,让文字智能适配背景颜色。


混合模式 mix-blend-mode: difference



CSS3 新增了一个很有意思的属性 -- mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。一共有下图所示的一些混合模式:


fdad0def89fa4cc4aaddacc8d84f1667_tplv-k3u1fbpfcp-watermark.png


其中,本文的主角是 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%);
    }
}


效果如下:


e3e2849bc3a14e6b84ced8ba1a742e48_tplv-k3u1fbpfcp-zoom-1.gif


CodePen Demo -- linear-gradient + Mix-blend-mode


当然,不一定是黑色或者白色,看看下面这个例子,有这样一种场景,有的时候我们不太确定背景颜色的最终表现值(可能是后台配置,传给前端),但是又需要让文字能够在任何背景颜色下都正常展出,此时,也可以尝试使用 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> 元素都可以正常展示出文本:

57c9f3da93fa4176b2bf57e1704c7c8c_tplv-k3u1fbpfcp-zoom-1.png


CodePen Demo -- mix-blend-mode:difference实现文字颜色自适应底色


mix-blend-mode:difference 的缺点



当然,这个方法不是完美的,因为通过 mix-blend-mode:difference 与底色叠加之后的颜色,虽然能够正常展示,但是不一定是最适合的颜色,展示效果的最好的颜色。

这里实际使用的时候,在非黑白场景下,还需要多加实验加以取舍。

目录
相关文章
|
14天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
13 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
1天前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
1天前
|
Web App开发 前端开发 iOS开发
|
2月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
42 1
简单几行代码CSS实现网页自动打文字效果
|
2月前
|
移动开发 前端开发 HTML5
css实现涂绘文字的效果
如何使用HTML5和CSS3创建一个简单的文字涂抹动画效果。通过设置一个相对定位的父级div包含文本,并在其上使用绝对定位的伪元素与之重叠,实现动画效果。关键在于控制伪元素的宽度从0%到100%的变化过程,同时利用`overflow: hidden`和`white-space: nowrap`确保文本按预期显示。光标效果则通过添加右边界来模拟。整体代码简洁明了,便于理解和实践。
27 1
css实现涂绘文字的效果
|
2月前
|
前端开发
css 渐变效果,这颜色 666 !
css 渐变效果,这颜色 666 !
|
2月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
56 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
2月前
|
前端开发
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
|
2月前
|
前端开发
CSS流光文字效果:打造网页上的霓虹灯效果!
CSS流光文字效果:打造网页上的霓虹灯效果!
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果