混合模式：mix-blend-mode: difference

前言

最近看到了css大佬chokcoco的一篇文章：利用混合模式，让文字智能适配背景颜色
后决定简单学习一下这个css属性。

mix-blend-mode

图片来源与大佬的文章

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

与白色混合将使底色反相；与黑色混合则不产生变化。
通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。

demo

 <div class="main"></div>

.main{
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
    position: relative;
    
    &::before{
        content:'LOADING';
        position: absolute;
        font-size: 50px;
        width: 100%;
        height: 100%;
        top: 40%;
        left: 20%;
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3s infinite linear alternate;
    }
} 
@keyframes move {
    0% {
        transform: translateX(20%);
    }
    100% {
        transform: translateX(-20%);
    }
}

效果

mix-blend-mode:difference 的缺点
这个方法不是完美的，因为通过 mix-blend-mode:difference 与底色叠加之后的颜色，虽然能够正常展示，但是不一定是最适合的颜色，展示效果的最好的颜色。
这里实际使用的时候，在非黑白场景下，还需要多加实验加以取舍。