页面上有一段文本,可以在不同的背景下显示不同的颜色吗?这通常被称为智能变色。如下:
黑色背景色为白色,白色背景色为黑色。看似复杂的效果,其实在于 CSS 中国很容易实现,今天就介绍这样一个小技巧, CSS 中,采用混合模式 mix-blend-mode: difference
,让文字智能适应背景色。[推荐学习:css视频教程]
混合模式 mix-blend-mode: difference
CSS3 新增了一个非常有趣的属性 -- mix-blend-mode ,其中 mix 和 blend 中文意义翻译是混合的,所以这个属性的直接翻译是混合混合模式,当然,我们通常称之为混合模式。有一些混合模式如下图所示:
其中,本文的主角是 mix-blend-mode: difference
,这意味着差异模式。该混合模式将检查每个通道中的颜色信息,比较背景颜色和绘图颜色,并使用较亮像素点的像素值减去较暗像素点的像素值。
与白色混合会使底色相反;与黑色混合不会改变。
一般来说,上图层的亮区反对下图层的颜色,而暗区则正常显示颜色。效果与原图像完全相反。
混合模式中最常见的应用场景是文章开头描述的场景,在不同的背景下显示不同的颜色。
最适合黑白场景,非常简单 DEMO:
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你