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

【CSS】『mix-blend-mode』の実装サンプル、画像の白背景を消す(透過させる)など
きのこさん
画像の白背景をCSSで透過できたりしますかー?
きのこさん
できるっちゃできますよー

『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輝度

対応ブラウザ

『mix-blend-mode』の対応ブラウザは下記サイトで確認できます。
IEも終了したので問題なく使えると思います。

Can I use

さいごに

きのこさん
おー、透過したー
きのこさん
mix-blend-modeは、時と場合で使うって感じですねー
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

MEJINAVI2022|目白大学がまるっとわかるメジナビ
MEJINAVI2022|目白大学がまるっとわかるメジナビ
ちょっと思い出しただけ
『点』、登場人物は3人だけ