怎么使用CSS混合模式让文字智能适配背景颜色

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

怎么使用CSS混合模式让文字智能适配背景颜色

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

混合模式 mix-blend-mode: difference

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

怎么使用CSS混合模式让文字智能适配背景颜色

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

效果如下:

怎么使用CSS混合模式让文字智能适配背景颜色

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> 元素都可以正常展示出文本:

怎么使用CSS混合模式让文字智能适配背景颜色

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

mix-blend-mode:difference 的缺点

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

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

关于“怎么使用CSS混合模式让文字智能适配背景颜色”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

文章标题:怎么使用CSS混合模式让文字智能适配背景颜色,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/23868

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云亿速云认证作者
上一篇 2022年9月8日 下午10:38
下一篇 2022年9月8日 下午10:39

相关推荐

  • 如何进行XiaoBa勒索病毒变种分析

    概述 XiaoBa勒索病毒,是一种新型电脑病毒,是一款国产化水平极高的勒索病毒,主要以邮件,程序木马,网页挂马的形式进行传播。这种病毒利用各种加密算法对文件进行加密,被感染者一般无法解密,必须拿到解密的私钥才有可能破解。倒计时200秒还不缴赎金,被加密的文件就会被全部销毁。 以上说明摘自百度百科,但…

    2022年9月21日
    20500
  • 如何进行Rapid勒索病毒分析与检测

    勒索病毒一直是安全行业的一个热点,近期安全人员发现了一款名为rapid的勒索病毒,该勒索病毒使用了 RSA加AES对文件进行加密,它不仅会感染计算机上已有的文件,还会对新创建的文件进行加密。本文对rapid病毒进行了详细分析,剖析其加密机制,解析其加密后的文件。 1.概述 当rapid病毒运行时,它…

    2022年9月21日
    19200
  • windows是否只查看安全传送的网页内容如何关闭

    是否只查看安全传送的网页内容关闭方法: 1、首先打开浏览器,然后点击任务栏中的“工具”。 2、之后点击下拉菜单中的“Internet选项”。 3、再点击选项窗口中的“安全”。 4、接着去点击下面的“自定义级别”。 5、下拉找到“显示混合内容”。 6、勾选下面的“启动”。 7、最后点击确定即可。 以上…

    2022年8月31日
    23800
  • mysql如何对列求和

    在mysql中,可以使用SUM()函数来对列求和;SUM()是一个求总和的函数,可以返回指定列值的总和,语法“SELECT SUM(DISTINCT 列名) FROM 表名;”,“DISTINCT”运算符允许计算集合中的不同值;SUM()函数在计算时,会忽略列值为NULL的行。 本教程操作环境:wi…

    2022年9月22日
    92500
  • 如何用rank函数排名

    用rank函数排名的方法: 1、首先进入空白单元格,然后输入:=RANK( )来进行排名。 2、然后去点击E2单元格,即可获得rank的名列前茅个参数,然后输入逗号。 3、之后就可以去框选所有的数据,并且去获取函数的第二个参数。 4、然后按下F4,即可对rank函数的第二个参数做绝对引用。 5、按下…

    2022年8月30日
    19000
  • windows bios设置u盘启动没有u盘选项如何解决

    解决方法: 1、启动盘制作完成之后,可以在开机的页面中按启动热键F8进入“bios”。 2、在这里可以找到usb高级设置的选项,将其状态改为启动,右侧类型改为“enabled”。 3、设置完成没有找到usb选项的话可以切换至boot,点击图中所指进入设置。 4、在这里你可以看到光标的位置,启动优选的…

    2022年9月22日
    31300
  • sqlmap处理sign加密的思路

    我对公司的APP进行测试的时候发现,我们是将所有的参数内容加上一个32位字符最后在进行MD5加密。由于APP处理的流程首先是验证sign是不是正确,如果验签失败,根本就进不去数据库,为了要使用SQLMAP对其进行测试,于是就写了一个代理数据的脚本,在拦截到数据包之后,对其参数内容和32字符进行加密替…

    2022年9月21日
    22400
  • jquery如何监听select的改变

    监听步骤:1、利用change()给select元素绑定改变事件,并设置事件处理函数,语法“$(“select”).change(function() {…});”;2、在事件处理函数中,设置事件触发后需要执行的代码,语法“alert(“选项已被改变&…

    2022年9月13日
    3.0K00
  • windows驱动精灵drivergenius删不了如何解决

    解决方法: 1、右击桌面任务栏,点击“任务管理器”。 2、右击“drivergenius”,选择“结束任务”。 3、右击此电脑,选择“管理”。 4、点击“服务和应用程序”的下拉,选择“服务”。 5、在右侧文件中找到“Drivergenius core service”双击打开。 6、将“启动类型”改…

    2022年9月10日
    25300
  • daisyUI怎么解决TailwindCSS堆砌class问题

    daisyUI概述 daisyUI是一个可定制的TailwindCSS的组件库,目前(发文日期)在GitHub中已经有12.8k的star数量。 它与现在常用的ElementUI或者AntDesign不同,它提供了一些类名,类似于Bootstrap,想要拿来即用的组件需要自己进行封装。 daisyU…

    2022年8月30日
    54800
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部