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

<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>

  黑底白字：
  当前颜色：    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>