mix-blend-mode:difference显示不同文字颜色实例页面

展示

代码

• HTML：

  <div class="content">
      <p>实现原理如下。</p>
      <p>背景图和文字正常排版，然后使用一个白色鸟图像覆盖在底部鸟图像的上面，设置混合模式为difference差值，这样，这块区域的文字颜色就变成白色了。</p>
      <p>鸟图像的原图是黑色，这里使用了CSS mask遮罩让小鸟变色。</p>
  </div>

• CSS：

  .content {
      height: 197px;
      position: relative;
      z-index: 0;
      color: black;
  }
  .content::before,
  .content::after {
      content: "";
      position: absolute;
      width: 120px; height: 197px;
      background-color: rgb(255, 63, 0);
      --maskUrl: url(../images/bird.png);
      -webkit-mask: var(--maskUrl);
      mask: var(--maskUrl);
  }
  .content::after {
      left: 0; top: 0;
      background-color: #fff;
      mix-blend-mode: difference;
  }
  .content::before {
      z-index: -1;
  }