はじめに

前回、「背景画像を二枚以上配置したい時の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の上でも背景色が配置されます（当然と言えば当然ですが）。

この方法を活用すれば「オンマウス時に背景画像の上に半透明の色を重ねる」事もできますので、いずれ紹介したいと思います（ページを作りました）。