关于前端:神奇的-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

当然，不肯定是彩色或者红色，看看上面这个例子，有这样一种场景，有的时候咱们不太确定背景色彩的最终表现值（可能是后盾配置，传给前端），然而又须要让文字可能在任何背景色彩下都失常展出，此时，也能够尝试应用 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 实现文字色彩自适应底色

mix-blend-mode:difference 的毛病

当然，这个办法不是完满的，因为通过 mix-blend-mode:difference 与底色叠加之后的色彩，尽管可能失常展现，然而不肯定是最适宜的色彩，展现成果的最好的色彩。

这里理论应用的时候，在非黑白场景下，还须要多加试验加以取舍。

最初

总结一下，本文介绍了利用 CSS 混合模式实现文本适配背景展现的一个小技巧，如果你对混合模式感兴趣，举荐你再看看我的下列文章：

• 不堪设想的混合模式 mix-blend-mode
• 不堪设想的混合模式 background-blend-mode
• 两行 CSS 代码实现图片任意色彩赋色技术
• 巧用 CSS 构建突变黑白二维码
• CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪成果
• 探索 CSS 混合模式 \ 滤镜导致 CSS 3D 生效问题
• CSS 艺术 — 应用 background 发明各种美好的背景

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。