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

2022.6.17
CSS

画像の白背景をCSSで透過できたりしますかー？

できるっちゃできますよー

『mix-blend-mode』を使うとこんな感じになります（実装サンプル）
『mix-blend-mode』のプロパティ値と効果
対応ブラウザ
さいごに

『mix-blend-mode』を使うとこんな感じになります（実装サンプル）

白背景を透過させるなら「multiply」がいい感じです。
画像と背景の色バランスがあるので合うものを選ぶって感じですね。

See the Pen
【CSS】mix-blend-modeをまとめてみる、画像の白背景を消す（透過させる）など by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<img src="https://125naroom.com/demo/img/logo_125naroom.jpg" alt="125naroom" class="normal">

CSS

.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;
}
.cdarken {
  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;
}

『mix-blend-mode』のプロパティ値と効果

プロパティ値	効果
normal	通常（デフォルト）
multiply	乗算
screen	スクリーン
overlay	オーバーレイ
color-dodge	覆い焼き
color-burn	焼き込み
darken	比較（暗）
lighten	比較（明）
hard-light	ハードライト
soft-light	ソフトライト
difference	差の絶対値
exclusion	除外
hue	色相
saturation	彩度
color	カラー
luminosity	輝度