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

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

文字智能适配背景颜色

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

   HTML 代码:

   <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. 这是为什么呢？经过一番资料查阅，设置了这个属性后，它是这样计算的：

   TXT 代码:

     **黑底白字：**
     当前颜色：    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 其他属性