【CSS】背景を透過させる便利なCSS：白・黒・透過・オーバーレイ

ロゴ画像についてた白背景を透過方法

ロゴの背景がHP画像に載せるとき加工するのが手間です～

かんたんに設定する方法ないですか？

CSS設定をしてみてください＾＾

CSS設定するだけでロゴを加工しなくても変更できるのでとても便利ですね

背景画像いれるのは普通にイメージを入れてください。

<div class="logo"><img /></div>

CSS設定はこちら

【背景画像を透明にする】

.logo｛
mix-blend-mode: multiply
｝

【白透過させる】

.logo{
mix-blend-mode: soft-light
}

【黒だけ透過させる】

.logo {
mix-blend-mode: screen
}

【黒透過させる】

.logo{
mix-blend-mode: exclusion
}

【オーバーレイさせる】

.logo{
mix-blend-mode: overlay
}

メモで残しておきますね＾＾ありがとうございます。

関連サイト記事

タイトルとURLをコピーしました