mix-blend-mode 利用混合模式让文字智能适配背景颜色

今天向大家推荐一个 CSS3 属性：mix-blend-mode，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合模式。

文字智能适配背景颜色

1. 这个效果就是在黑色背景中显示白色文字，在白色背景中显示黑色文字，而且是自动的：

<style>
   .main {
     width: 600px;
     height: 200px;
     background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
     position: relative;
     margin: 100px auto;
   }

   .main::before {
     content: '白雾茫茫丶';
     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%);
     }
   }
 </style>
 <div class="main"></div>

我们可以发现，代码非常简单，关键是这个属性：mix-blend-mode: difference

2. 这是为什么呢？经过一番资料查阅，设置了这个属性后，它是这样计算的：

黑底白字：
当前颜色：    255  255  255
父元素：       0    0    0
混合后的颜色：255   255  255

白底黑字：
当前颜色：    255  255  255
父元素：      255  255  255
混合后的颜色： 0    0    0

由此可以得出结论：混合后的颜色 = 当前颜色 - 父元素背景色

实现文字镂空效果

<style>
  .parent {
    background-image: url("./images/1.jpg");
    width: 600px;
    height: 400px;
    position: relative;
    margin: 100px auto;
  }

  .parent .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-size: 50px;
    color: #000;
    background-color: #fff;
    mix-blend-mode: screen;
  }
</style>
<div class="parent">
  <div class="child">白雾茫茫丶</div>
</div>

mix-blend-mode 其他属性

属性值	描述
normal	默认值，没有混合效果
multiply	正片叠底
screen	滤色
overlay	叠加
darken	变暗
lighten	变亮
color-dodge	颜色减淡
color-burn	颜色加深
hard-light	强光
soft-light	柔光
difference	差值
exclusion	排除
hue	色相
color	颜色
saturation	饱和度
luminosity	亮度

其它属性的效果，有兴趣的伙伴可以研究一下！