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

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のdisplay:flexを使って要素を上下左右中央寄せにする方法
続きを読む

最後に

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

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

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

CSSだけでできる背景画像をぼかす方法!画像加工不要で超簡単!
続きを読む
キーワード
WEBデザイン