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

CSS で背景画像を透過しているように見せる方法を紹介します。 例えば、子要素に影響を与えずに親要素の背景画像だけを透過表現したい時に便利な方法です。 CSS で背景画像を透過しているように見せる方法 白地で透過 黒地で透過 CSS で背景画像を透過しているように見せる方法 img 要素などの透過は opacity を利用すればよいのですが、背景画像が含まれる要素に opacity を利用すると、子要素も透過されてしまいます。そこで background の blend-mode を利用することで、背景画像だけを透過した感じにすることができます。 白地で透過 背景画像を「白地で透過」させるには、はじめに background-image で背景画像を指定。 続いて background-color で白色を rgba で指定、透過の値を 1 以下に指定して透過させます（サンプルでは0.5を