スタイルシートで背景色の上に文字を入れたい。でも、そのままだとテキストが見にくくなってしまうから、画像の上に色を重ねたい、そんなときにCSSで解決させる方法についてお話します。

背景画像の上に背景色を重ねる方法

backgroundプロパティは、背景画像か背景色のどちらか１つしか指定できませんので１つのbackgroundプロパティだけだと対応できません。そのため、次のような方法をとります。

本来の要素には背景画像・その疑似要素::beforeもしくは::afterに背景色を入れる

ボタンで表示を切り替えてご覧ください。

See the Pen
background-img-color by kenichi (@ken81)
on CodePen.

HTML

<div class="bg_img">
  <p>あなたの<br>オフィスに<br>革命を</p>
</div>

CSS

.bg_img{
  background: URL(https://cotodama.co/wp-content/uploads/2018/02/165431963.jpg);
  wight: 100%;
  height: 240px;
  background-size:cover;
  background-position:50%;
  position: relative;
}
.bg_img::after {
  content: '';
  background-color: rgba(0,0,0,.5);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 240px;
}
p{
  margin: 0;
  padding: .2em;
  font-size:3.0rem;
  color: #FFF;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

↑これが結論です。本来、背景を指定したかった要素には画像を入れて、その要素の疑似要素::beforeもしくは::afterに背景色を指定するという方法です。もちろん、これだけだとうまく表示できないので細かい調整が必要ではあります。以下、順を追ってお話します。

擬似要素（背景色）を追加する

まずは、疑似要素を追加します。

See the Pen
background-img-color01 by kenichi (@ken81)
on CodePen.

CSS

.bg_img::after {
  content: '';
  background-color: rgba(0,0,0,.5);
}

これは単純に疑似要素を追加して、背景色を入れただけの状態です。これだけだと、疑似要素には何も入っていませんし、::afterは「要素の後（つまり下）」に追加されるものなのでいずれにしても何も起こりません。次にpositionプロパティを使って画像の上に背景色を重ねて、さらに画像と同じサイズにします。それが下記の方法です。

擬似要素（背景色）の位置とサイズを調整

See the Pen
background-img-color02 by kenichi (@ken81)
on CodePen.

CSS

.bg_img{
  background: URL(https://cotodama.co/wp-content/uploads/2018/02/165431963.jpg);
  wight: 100%;
  height: 240px;
  background-size:cover;
  background-position:50%;
  position: relative;
}
.bg_img::after {
  content: '';
  background-color: rgba(0,0,0,.5);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

最初に背景色の位置の基準を背景画像を入れている要素にしたいので、背景画像の要素にposition: relative;を指定します。それから、疑似要素にposition:absolute;で絶対位置を指定した後、上下左右の値をそれぞれ”0″にします。そうすると背景画像を入れた要素の上下左右にピタッと背景色が収まります。

お気づきだと思いますが、この状態だとテキストの上に背景色が来てしまっているので意味がありません。次はテキストを一番上に重なるようにします。

テキストを上に移動させる

See the Pen
background-img-color03 by kenichi (@ken81)
on CodePen.

CSS

p{
  margin: 0;
  padding: .2em;
  font-size:3.0rem;
  color: #FFF;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

最初に、テキストにposition: relative;を指定して位置を変更できるようにします。その後、z-index: 1;を指定して、一番上にテキストが重なるようにします。z-indexの値は、数字が大きいほど上に要素が来ますので、”1″でも上に来ないときは数字をもっと大きくしてみてください。

以上が、背景画像の上に背景色を重ねる方法でした。