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