实现文字智能适配背景

酱爆 Crazy

已于 2023-03-14 00:30:30 修改

阅读量195

点赞数

分类专栏：笔记文章标签： css 前端

于 2023-03-14 00:28:01 首次发布

本文链接：https://blog.csdn.net/weixin_43402404/article/details/129512160

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了CSS3的mix-blend-mode:difference属性，该属性能让文字在黑色背景上显示白色，在白色背景上显示黑色，适用于自动适应背景颜色的文字显示。通过差值模式，亮区反相底色，暗区保持颜色，实现了一种动态的文本颜色效果。

摘要由CSDN通过智能技术生成

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

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

其中，本文的主角是 mix-blend-mode: difference，意为差值模式。该混合模式会查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。

与白色混合将使底色反相；与黑色混合则不产生变化。

通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。

该混合模式最常见的应用场景就是文章开头描述的场景，实现文本在不同背景色下展示不同的颜色。

最适合于黑白场景，非常简单的一个 DEMO：

mix-blend-mode:difference;

.titlee {
font-size:3em;
transition:0.5s;
mix-blend-mode:difference;
color:☐#fff;
}

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%);
    }
}