CSSだけで画像の白背景を透過させる方法

CSSだけで画像の白背景を透過させる方法

ロゴなど背景を透過させたいけど元の画像の背景が透過されていないときがあると思いますが、そんなときに便利なCSSがあります。

CSSだけで画像の白背景を透過できるmix-blend-modeプロパティについて使い方をまとめました。

以下の画像を使って説明します。

透過なしの場合

See the Pen 20211126_01 by Tadafumi Ito (@suzuran_code) on CodePen.

透過ありの場合

See the Pen 20211126_02 by Tadafumi Ito (@suzuran_code) on CodePen.

このように、mix-blend-mode: multiply;を追加するだけで簡単に背景が透過されるようになります。

backgroundを別の画像にすることで以下のようなにすることもできます。

See the Pen 20211126_03 by Tadafumi Ito (@suzuran_code) on CodePen.