mix-blend-mode各个混合模式值效果实例页面

展示

代码

• HTML：

  <h4>mix-blend-mode:normal</h4>
  <div class="box">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:multiply</h4>
  <div class="box" style="--mode:multiply;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:screen</h4>
  <div class="box" style="--mode:screen;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:overlay</h4>
  <div class="box" style="--mode:overlay;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:darken</h4>
  <div class="box" style="--mode:darken;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:lighten</h4>
  <div class="box" style="--mode:lighten;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:darken</h4>
  <div class="box" style="--mode:darken;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:color-dodge</h4>
  <div class="box" style="--mode:color-dodge;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:color-burn</h4>
  <div class="box" style="--mode:color-burn;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:hard-light</h4>
  <div class="box" style="--mode:hard-light;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:soft-light</h4>
  <div class="box" style="--mode:soft-light;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:difference</h4>
  <div class="box" style="--mode:difference;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:exclusion</h4>
  <div class="box" style="--mode:exclusion;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:hue</h4>
  <div class="box hsl" style="--mode:hue;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:saturation</h4>
  <div class="box hsl" style="--mode:saturation;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:color</h4>
  <div class="box hsl" style="--mode:color;">
      <div class="A"></div>
      <div class="B"></div>
  </div>
  <h4>mix-blend-mode:luminosity</h4>
  <div class="box hsl" style="--mode:luminosity;">
      <div class="A"></div>
      <div class="B"></div>
  </div>

• CSS：

  .box {
      display: flex;
      justify-content: center;
      isolation: isolate
  }
  .A,
  .B {
      width: 128px; height: 128px;
      border-radius: 50%;
      transform: scale(1.25);
      background-image: repeating-radial-gradient(transparent 8px, white 9px 13px, transparent 14px 22px, black 23px 27px);
  }
  .B {
      mix-blend-mode: var(--mode);
      background-color: deeppink;
  }
  .A {
      background-color: deepskyblue;
  }
  .A::before,
  .B::before {
      padding: 0 4px;
      color: #fff;
      background-color: #333;
      font-size: 12px;
      position: absolute;
      top: -22px;
      margin-left: 4px;
      transform-origin: right;
      transform: scale(0.8);
  }
  .A::before {
      content: "rgb(0,192,255)";
  }
  .B::before {
      content: "rgb(255,20,147)";
  }
  .hsl .A::before {
      content: "hsl(195,100%,50%)";
  }
  .hsl .B::before {
      content: "hsl(328,100%,54%)";
  }