【CSS】background-imageで背景画像に半透明レイヤーを重ねる小技

本記事では、CSSのbackground-imageで背景画像に半透明のレイヤーを重ねる小技をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

CSSのbackground-imageプロパティを使って、背景画像に半透明のレイヤーを重ねます。下記にデモを用意していますので、表示内容をご確認ください。Beforeが元の画像で、Afterが画像にレイヤーを重ねて表示している状態です。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

デモを表示を確認すると、元の画像に半透明のレイヤーが重なっていますね。

画像を1ヶ所で使う場合はフィルターを掛けた画像を書き出しておけば良いため上記のようなCSSを用意する必要はありませんが、同じ画像を複数の要素で使っていたり、表示方法が異なっていたり、それが何枚も存在する場合に有効な方法になるかなと思います。

background-imageで背景画像に半透明レイヤーを重ねる

では早速本題に。

前項のデモで使用しているHTMLとCSSの内容を掲載します。重要な部分はCSSの.afterで指定しているbackground-imageの値です。background-imageには複数の値を指定することができますので、画像の上に単色のグラデーションを重ねて表示する様に指定しています。こうすることで、画像に半透明のレイヤーが重なったように表示されます。

HTML

<div class="background before">
    <p>Before</p>
</div>
<div class="background after">
    <p>After</p>
</div>

CSS

.before {
    background-image: url(//into-the-program.com/demo/images/sample001.jpg);
    background-size: cover;
}

.after {
    background-image: radial-gradient(rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .5) 100%),
                      url(//into-the-program.com/demo/images/sample001.jpg);
    background-size: cover;
}

background-imageプロパティは、指定した順に上から重ねて表示されます。一番最初に指定した画像が一番上に表示されますので、その点だけご注意ください。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/background-image

最後に

背景画像に半透明のレイヤーを重ねるケースは頻繁にありますので、今後WEB制作に携わるであろう方に向けて内容をまとめてみました。本記事の内容が皆さんのコーディングのお役に立てれば幸いです。

以上、CSSのbackground-imageで背景画像に半透明レイヤーを重ねる小技のご紹介でした！