CSS で背景画像を透過して見せる方法

CSS で背景画像を透過しているように見せる方法を紹介します。
例えば、子要素に影響を与えずに親要素の背景画像だけを透過表現したい時に便利な方法です。

1. CSS で背景画像を透過しているように見せる方法
   1. 白地で透過
   2. 黒地で透過

CSS で背景画像を透過しているように見せる方法

img 要素などの透過は opacity を利用すればよいのですが、背景画像が含まれる要素に opacity を利用すると、子要素も透過されてしまいます。そこで background の blend-mode を利用することで、背景画像だけを透過した感じにすることができます。

白地で透過

背景画像を「白地で透過」させるには、はじめに background-image で背景画像を指定。
続いて background-color で白色を rgba で指定、透過の値を 1 以下に指定して透過させます（サンプルでは0.5を指定）。
最後に background-blend-mode で lighten を指定して、背景画像と背景色を混合させます。

.bg {

  background-image: url(hogehoge.jpg);

  background-color: rgba(255,255,255,0.5);

  background-blend-mode: lighten;

}

適用前

適用後

明るい色との混合は「lighten」を指定してください。

黒地で透過

背景画像を「黒地で透過」させるには、はじめに background-image で背景画像を指定。
続いて background-color で黒色 rgba で指定、透過の値を 1 以下に指定して透過させます（サンプルでは0.5を指定）。
最後に background-blend-mode で darken を指定して、背景画像と背景色を混合させます。

.bg {

  background-image: url(hogehoge.jpg);

  background-color: rgba(0,0,0,0.5);

  background-blend-mode: darken;

}

適用前

適用後

暗い色との混合は「darken」を指定してください。

まとめ

CSS で背景画像を透過しているように見せる方法を紹介しました。
背景画像を透過させて下地が透けるようにしたい場合は、紹介した方法ではなく、擬似要素や専用の要素を追加して対応してください。