画像の白背景を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は、時と場合で使うって感じですねー
