背景画像の上に半透明の背景色を重ねたい時のCSS設定
はじめに
前回、「背景画像を二枚以上配置したい時のCSS設定」で背景画像2つを重ねる方法を紹介しましたが、今回は「1枚が画像background-image
でもう1枚は背景色background-color
の時に、背景画像の上に色を重ねる方法」を紹介します。
今回使う画像と背景色

写真(左側)は前回同様、京都の北野天満宮へ行った時に撮影した物です(ちょうど梅園が公開中でした)。
右側の背景色は透過度50%の青background-color: rgba(0,0,255,.5)
で設定しています。
目次
(失敗例)background-imageとbackground-colorを別々に指定した場合
同じクラスの中でbackground-image
とbackground-color
を別々に記述した場合どうなるか試してみます。
前回、backgroud
をカンマで区切る場合は「前に配置したい画像」を先に記述したので、今回はbackground-image
とbackground-color
の記述する順番を前後2パターン作ってみました。
HTML
- <div class="sample01"></div>
CSS(background-imageを先に書いた場合)
- .sample01 {
- width: 240px;
- height: 240px;
- background-image: url("画像のurl");
- background-color: rgba(0,0,255,.5);
- }
できあがったもの
リロードをすると一瞬背景の青色が見えるので、背景色の上に画像が配置されているのが分かります。
CSS(background-colorを先に書いた場合)
- .sample02 {
- width: 240px;
- height: 240px;
- background-color: rgba(0,0,255,.5);
- background-image: url("画像のurl");
- }
できあがったもの
こちらもリロードをすると一瞬背景の青色が見ます。ということは同じクラスにbackground-image
とbackground-color
を別々に書いても単色は重ねられないという事ですね。
疑似要素にbackground-colorを設定した場合
実はこちらが本命です。背景画像の上に背景色を重ねたい場合は疑似要素を使います。
疑似要素も:before
と:after
がありますのでそれぞれ試してみます。
CSS(疑似要素:beforeの場合)
- .sample03 {
- position: relative;
- width: 240px;
- height: 240px;
- background-image: url("画像のurl");
- }
- .sample03:before {
- position: absolute;
- content: '';
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0,0,255,.5);
- }
できあがったもの
疑似要素を使うと、背景色が背景画像の前面に配置できます。同様に:after
で記述した場合を試してみます。
CSS(疑似要素:afterの場合)
- .sample04 {
- position: relative;
- width: 240px;
- height: 240px;
- background-image: url("画像のurl");
- }
- .sample04:after {
- position: absolute;
- content: '';
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0,0,255,.5);
- }
できあがったもの
疑似要素であれば:after
でも背景色が前面に配置されます。
補足 画像がbackgroundじゃない場合
ついでに、画像がbackground-image
ではなくimage
の場合はどうなるのか試してみました。
こちらもbackground-color
と疑似要素:before
:after
で試してみます。
HTML
- <div class="sample01">
- <img src="画像のurl" alt="背景画像">
- </div>
CSS(background-colorを設定した場合)
- .sample05 {
- width: 240px;
- height: 240px;
- background-color: rgba(0,0,255,.5);
- }
できあがったもの

こちらはリロードしても分かりませんが、実際には画像の後ろに背景色が配置されています。
CSS(疑似要素:beforeの場合)
- .sample06 {
- position: relative;
- width: 240px;
- height: 240px;
- }
- .sample06:before {
- position: absolute;
- content: '';
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0,0,255,.5);
- }
できあがったもの

CSS(疑似要素:afterの場合)
- .sample07 {
- position: relative;
- width: 240px;
- height: 240px;
- }
- .sample07:after {
- position: absolute;
- content: '';
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0,0,255,.5);
- }
できあがったもの

疑似要素を使うと、画像image
の上でも背景色が配置されます(当然と言えば当然ですが)。
この方法を活用すれば「オンマウス時に背景画像の上に半透明の色を重ねる」事もできますので、いずれ紹介したいと思います(ページを作りました)。