soft-light和hard-light混合模式效果对比实例页面

展示

代码

• HTML：

  <section class="hard-light">
      <h4>强光（透明-原图）</h4>
      <div class="blend"></div>
      <h4>强光（白色）</h4>
      <div class="blend" style="--blendColor: white;"></div>
      <h4>强光（红色）</h4>
      <div class="blend" style="--blendColor: red;"></div>
      <h4>强光（黄色）</h4>
      <div class="blend" style="--blendColor: yellow;"></div>
      <h4>强光（蓝色）</h4>
      <div class="blend" style="--blendColor: blue;"></div>
  </section>
  <section class="soft-light">
      <h4>柔光（透明-原图）</h4>
      <div class="blend"></div>
      <h4>柔光（白色）</h4>
      <div class="blend" style="--blendColor: white;"></div>
      <h4>柔光（红色）</h4>
      <div class="blend" style="--blendColor: red;"></div>
      <h4>柔光（黄色）</h4>
      <div class="blend" style="--blendColor: yellow;"></div>
      <h4>柔光（蓝色）</h4>
      <div class="blend" style="--blendColor: blue;"></div>
  </section>

• CSS：

  .hard-light,
  .soft-light {
      width: calc(50% - .5rem);
  }
  .blend {
      padding: 68.55% 100% 0 0;
      background: radial-gradient(farthest-corner circle at 25% 25%, var(--blendColor), var(--endColor, black)),
          url(../images/nature-5.jpg) center / cover;
  }
  .blend:first-of-type {
      --blendColor: transparent;
      --endColor: transparent;
  }
  .hard-light .blend {
      background-blend-mode: hard-light;
  }
  .soft-light .blend {
      background-blend-mode: soft-light;
  }