CSSだけでできる背景画像を暗くする方法！画像加工不要で超簡単！

背景に画像を敷いてその上にテキストを載せるデザインをする際、テキストを読みやすくするために画像を暗くしたい場合があります。

そのために画像を作り直すのもめんどくさいので、CSSだけで画面を暗くする方法をご紹介します。

背景画像をCSSだけで暗くする方法

まずこちらをご覧ください。テキストを中央に配置してますが、背景の画像が明るくて上に載せたテキストが読みにくいですね。

CSSで背景に敷いた画像を暗くしてみました。これでテキストが読みやすくなりました。

厳密には「背景画像の上に黒い色を半透明化したものを載せた」状態ですが、テキストが一瞬で読みやすくなりました。

というわけで、まずHTMLの記述例から。

<div class="contents-frame">
  <p>テキストがここに入ります。</p>
</div>

そしてCSSはこんな感じ。

.contents-frame {
  background-attachment: fixed;
  background-image: url(画像のパス);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100vh;
  width: 100%;
}
.contents-frame::before {
  content: '';
  background-color: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

これで背景画像が暗くなりました。

テキストを中央に配置するには

テキストを中央に配置する方法については上記のソースで省いてますので、下記の3行を追記してください。

.contents-frame {
  display: flex;
  align-items: center;
  justify-content: center;
}

背景画像を全画面表示するには

そもそも背景画像を全画面表示する方法がわからないという方は、こちらの記事をご覧ください。

最後に

個人的にはかなり便利で多用しているテクニックです。画像加工し直さないで済むのがとにかく楽なんですよ。

ぜひ使ってみてください。

そして、合わせて使うと便利なCSSだけで画像をぼかす方法はこちらをどうぞ。