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

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

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

関連記事『CSSで画像を画面いっぱいに広げたデザインを作るには?パソコンでもスマホでも背景画像を全画面表示しよう!』のサムネイル画像
CSSで画像を画面いっぱいに広げたデザインを作るには?パソコンでもスマホでも背景画像を全画面表示しよう!
続きを読む

最後に

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

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

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

関連記事『CSSだけでできる背景画像をぼかす方法!画像加工不要で超簡単!』のサムネイル画像
CSSだけでできる背景画像をぼかす方法!画像加工不要で超簡単!
続きを読む