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


画像の白背景を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も終了したので問題なく使えると思います。
さいごに

おー、透過したー

mix-blend-modeは、時と場合で使うって感じですねー
おすすめ
かんれん
- web / 2019.3.28
- 【CSS】counter-incrementを使って擬似要素をリスト化する
- web / 2020.1.1
- 【CSS】スマホでリンクをタップした時に色を変える方法
- web / 2019.12.19
- 【CSS】背景画像を固定したおしゃれなLP(ランディングページ)を作ってみよう
- web / 2021.8.20
- 【CSS】打ち消し線(delタグ)をカスタマイズする
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2021.9.17
- 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)
Googleさんのおすすめ
デザインの記事
- 2023.01.25New
- good eighty%
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2023.01.25New
- good eighty%
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2022.06.04
- 『点』、登場人物は3人だけ
- (C)2017 WARNER MUSIC JAPAN INC. もくじ 『点』 登場人物は3人だけ なんとも心地よい …
- いつかのこと – 無印良品の家と暮らす