颜色系混合模式和色盘混合效果实例页面

展示

代码

• HTML：

  <section>
      <p>原图：<img src="../images/nature-4.jpg" width="100%"></p>
      <div>渐变：<div class="blend" style="background: none;"></div></div>
  </section>
  <h4>hue色调混合</h4>
  <div class="blend" style="--blendMode: hue;"></div>
  <h4>saturation饱和度混合</h4>
  <div class="blend" style="--blendMode: saturation;"></div>
  <h4>color色调饱和度混合</h4>
  <div class="blend" style="--blendMode: color;"></div>
  <h4>luminosity亮度混合</h4>
  <div class="blend" style="--blendMode: luminosity;"></div>

• CSS：

  .blend {
      padding: 63.67% 100% 0 0;
      background: url(4.jpg) center / cover;
      position: relative;
  }
  .blend::before {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;
      background: radial-gradient(closest-side, gray, transparent),
          conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
      mix-blend-mode: var(--blendMode);
  }