【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とCSSはこちら

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も終了したので問題なく使えると思います。

さいごに

おー、透過したー
mix-blend-modeは、時と場合で使うって感じですねー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

7

/

14

2024

Googleさんの
おすすめ

7

/

14

2024

デザインの記事

株式会社High Link
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】スライダープラグイン「slick」実装サンプル集