【CSS】『mix-blend-mode』の実装サンプル、画像の白背景を消す（透過させる）など

<div class="one_area">
  <div class="one_box">
    <p>normal</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="normal">
  </div>
  <div class="one_box">
    <p>multiply</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="multiply">
  </div>
  <div class="one_box">
    <p>screen</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="screen">
  </div>
  <div class="one_box">
    <p>overlay</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="overlay">
  </div>
  <div class="one_box">
    <p>color-dodge</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="color-dodge">
  </div>
  <div class="one_box">
    <p>color-burn</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="color-burn">
  </div>
  <div class="one_box">
    <p>darken</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="darken">
  </div>
  <div class="one_box">
    <p>lighten</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="lighten">
  </div>
  <div class="one_box">
    <p>hard-light</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="hard-light">
  </div>
  <div class="one_box">
    <p>soft-light</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="soft-light">
  </div>
  <div class="one_box">
    <p>difference</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="difference">
  </div>
  <div class="one_box">
    <p>exclusion</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="exclusion">
  </div>
  <div class="one_box">
    <p>hue</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="hue">
  </div>
  <div class="one_box">
    <p>saturation</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="saturation">
  </div>
  <div class="one_box">
    <p>color</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="color">
  </div>
  <div class="one_box">
    <p>luminosity</p>
    <img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="luminosity">
  </div>
</div>

/* ---------- 01 16 種類を並べる ---------- */
.normal {
  mix-blend-mode: normal;
}
.multiply {
  mix-blend-mode: multiply;
}
.screen {
  mix-blend-mode: screen;
}
.overlay {
  mix-blend-mode: overlay;
}
.color-dodge {
  mix-blend-mode: color-dodge;
}
.color-burn {
  mix-blend-mode: color-burn;
}
.darken {
  mix-blend-mode: darken;
}
.lighten {
  mix-blend-mode: lighten;
}
.hard-light {
  mix-blend-mode: hard-light;
}
.soft-light {
  mix-blend-mode: soft-light;
}
.difference {
  mix-blend-mode: difference;
}
.exclusion {
  mix-blend-mode: exclusion;
}
.hue {
  mix-blend-mode: hue;
}
.saturation {
  mix-blend-mode: saturation;
}
.color {
  mix-blend-mode: color;
}
.luminosity {
  mix-blend-mode: luminosity;
}

/* 並べ方 */
.one_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
.one_box {
  width: calc((100% - 20px * 2) / 3);
  background-color: #e8dc6a;
  padding: 20px;
}
.one_box p {
  text-align: center;
  margin: 0 0 10px;
}
.one_box img {
  max-width: 100%;
  vertical-align: top;
}
@media (max-width: 736px) {
  .one_area {
    gap: 10px;
  }
  .one_box {
    width: calc((100% - 10px * 2) / 3);
    padding: 10px;
  }
  .one_box p {
    font-size: 10px;
  }
}