CSSで背景画像に半透明のレイヤーを重ねて背景のみを暗くする方法

背景画像の上にテキストを重ねた場合に、背景画像だけを少し暗くして上に重ねた文字を際立たせたいことってあるかと思います。

画像自体を編集しても良いのですが、CSSだけでも背景画像の上に半透明のレイヤーを重ねることはできますので、その方法をご紹介したいと思います。

CSSで背景画像に半透明のレイヤーを重ねて背景のみを暗くする方法

まず、HTMLは以下のようにシンプルなもので説明いたします。

<div class="bg">
  <div class="cont">
    <h1>キャッチ</h1>
    <p>テキスト</p>
  </div>
</div>

CSSでは、以下のように指定します。

.bg {
  background: url(images/sample.jpg) no-repeat center;
  background-size: cover;
  position: relative;
}

.bg::before  {
  content: '';
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.cont {
  position: relative;
}

.bgに背景画像を指定して、::before疑似要素で半透明のレイヤーを重ねています。.contにも”position:relative;”を追加することで、.contよりも後ろにレイヤーが入り、文字などが薄くならないようにしています。

あとがき

上記の例では、div要素に対して背景を指定して半透明のレイヤーを重ねていますが、bodyなどに全画面の背景画像を指定する際にも使える手法です。

ぜひ参考にしていただけると幸いです。