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

CSS で背景画像を透過しているように見せる方法を紹介します。
例えば、動的に読み込んでいる画像を、編集することなく透過しているように見せたいときに便利な方法です。

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

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

単純に画像を表示している場合であれば opacity を利用すればよいのですが、背景画像の場合は opacity をピンポイントで適用することはできません。
そこで、背景画像を透過しているように見せるには、background の複数指定と、background-blend-mode を利用します。

白地に透過

背景画像を「白地に透過」しているように見せるには、background-image で背景画像指定。
次に、background-color で白色を指定して、任意の値で透過を設定します。
続いて、background-blend-mode で lighten を指定して、背景画像と背景色を混合させます。
明るい色との混合は「lighten」を指定してください。

.bg {

  background-image: url(hogehoge.jpg);

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

  background-blend-mode: lighten;

}

黒地に透過

背景画像を「黒地に透過」しているように見せるには、background-image で背景画像指定。
次に、background-color で黒色を指定して、任意の値で透過を設定します。
続いて、background-blend-mode で darken を指定して、背景画像と背景色を混合させます。
暗い色との混合は「darken」を指定してください。

.bg {

  background-image: url(hogehoge.jpg);

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

  background-blend-mode: darken;

}

まとめ

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