difference和exclusion混合模式效果对比实例页面

展示

代码

• HTML：

  <section class="difference">
      <h4>差值（文字白色）</h4>
      <div class="blend" style="color: white;"></div>
      <h4>差值（文字浅灰）</h4>
      <div class="blend" style="color: lightgray;"></div>
      <h4>差值（文字深灰色）</h4>
      <div class="blend" style="color: darkgray;"></div>
      <h4>差值（文字灰色）</h4>
      <div class="blend" style="color: gray;"></div>
      <h4>差值（文字暗灰色）</h4>
      <div class="blend" style="color: dimgray;"></div>
      <h4>差值（文字黑色）</h4>
      <div class="blend" style="color: black;"></div>
  </section>
  <section class="exclusion">
      <h4>排除（文字白色）</h4>
      <div class="blend" style="color: white;"></div>
      <h4>排除（文字浅灰）</h4>
      <div class="blend" style="color: lightgray;"></div>
      <h4>排除（文字深灰色）</h4>
      <div class="blend" style="color: darkgray;"></div>
      <h4>排除（文字灰色）</h4>
      <div class="blend" style="color: gray;"></div>
      <h4>排除（文字暗灰色）</h4>
      <div class="blend" style="color: dimgray;"></div>
      <h4>排除（文字黑色）</h4>
      <div class="blend" style="color: black;"></div>
  </section>

• CSS：

  .exclusion,
  .difference {
      width: calc(50% - .5rem);
  }
  .blend {
      padding: 68.55% 100% 0 0;
      background: url(6.jpg) center / cover;
      position: relative;
  }
  .blend::before {
      content: "CSS新世界";
      font-size: 2.4rem;
      position: absolute;
      left: 0; right: 0; top: calc(50% - 1.8rem);
      text-align: center;
      font-weight: bold;
  }
  .exclusion .blend::before {
      mix-blend-mode: exclusion;
  }
  .difference .blend::before {
      mix-blend-mode: difference;
  }