背景画像の上に半透明の背景色を重ねたい時のCSS設定

はじめに

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

今回使う画像と背景色

背景画像

写真(左側)は前回同様、京都の北野天満宮へ行った時に撮影した物です(ちょうど梅園が公開中でした)。

右側の背景色は透過度50%の青background-color: rgba(0,0,255,.5)で設定しています。

目次

(失敗例)background-imageとbackground-colorを別々に指定した場合

同じクラスの中でbackground-imagebackground-colorを別々に記述した場合どうなるか試してみます。

前回、backgroudをカンマで区切る場合は「前に配置したい画像」を先に記述したので、今回はbackground-imagebackground-colorの記述する順番を前後2パターン作ってみました。

HTML

  1. <div class="sample01"></div>

CSS(background-imageを先に書いた場合)

  1. .sample01 {
  2.  width: 240px;
  3.  height: 240px;
  4.  background-image: url("画像のurl");
  5.  background-color: rgba(0,0,255,.5);
  6. }

できあがったもの

リロードをすると一瞬背景の青色が見えるので、背景色の上に画像が配置されているのが分かります。

CSS(background-colorを先に書いた場合)

  1. .sample02 {
  2.  width: 240px;
  3.  height: 240px;
  4.  background-color: rgba(0,0,255,.5);
  5.  background-image: url("画像のurl");
  6. }

できあがったもの

こちらもリロードをすると一瞬背景の青色が見ます。ということは同じクラスにbackground-imagebackground-colorを別々に書いても単色は重ねられないという事ですね。

疑似要素にbackground-colorを設定した場合

実はこちらが本命です。背景画像の上に背景色を重ねたい場合は疑似要素を使います。

疑似要素も:before:afterがありますのでそれぞれ試してみます。

CSS(疑似要素:beforeの場合)

  1. .sample03 {
  2.  position: relative;
  3.  width: 240px;
  4.  height: 240px;
  5.  background-image: url("画像のurl");
  6. }
  7. .sample03:before {
  8.  position: absolute;
  9.  content: '';
  10.  left: 0;
  11.  top: 0;
  12.  width: 100%;
  13.  height: 100%;
  14.  background-color: rgba(0,0,255,.5);
  15. }

できあがったもの

疑似要素を使うと、背景色が背景画像の前面に配置できます。同様に:afterで記述した場合を試してみます。

CSS(疑似要素:afterの場合)

  1. .sample04 {
  2.  position: relative;
  3.  width: 240px;
  4.  height: 240px;
  5.  background-image: url("画像のurl");
  6. }
  7. .sample04:after {
  8.  position: absolute;
  9.  content: '';
  10.  left: 0;
  11.  top: 0;
  12.  width: 100%;
  13.  height: 100%;
  14.  background-color: rgba(0,0,255,.5);
  15. }

できあがったもの

疑似要素であれば:afterでも背景色が前面に配置されます。

補足 画像がbackgroundじゃない場合

ついでに、画像がbackground-imageではなくimageの場合はどうなるのか試してみました。

こちらもbackground-colorと疑似要素:before:afterで試してみます。

HTML

  1. <div class="sample01">
  2.  <img src="画像のurl" alt="背景画像">
  3. </div>

CSS(background-colorを設定した場合)

  1. .sample05 {
  2.  width: 240px;
  3.  height: 240px;
  4.  background-color: rgba(0,0,255,.5);
  5. }

できあがったもの

背景画像

こちらはリロードしても分かりませんが、実際には画像の後ろに背景色が配置されています。

CSS(疑似要素:beforeの場合)

  1. .sample06 {
  2.  position: relative;
  3.  width: 240px;
  4.  height: 240px;
  5. }
  6. .sample06:before {
  7.  position: absolute;
  8.  content: '';
  9.  left: 0;
  10.  top: 0;
  11.  width: 100%;
  12.  height: 100%;
  13.  background-color: rgba(0,0,255,.5);
  14. }

できあがったもの

背景画像

CSS(疑似要素:afterの場合)

  1. .sample07 {
  2.  position: relative;
  3.  width: 240px;
  4.  height: 240px;
  5. }
  6. .sample07:after {
  7.  position: absolute;
  8.  content: '';
  9.  left: 0;
  10.  top: 0;
  11.  width: 100%;
  12.  height: 100%;
  13.  background-color: rgba(0,0,255,.5);
  14. }

できあがったもの

背景画像

疑似要素を使うと、画像imageの上でも背景色が配置されます(当然と言えば当然ですが)。

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