【コピペで簡単】CSSだけで背景画像を暗くする方法。画像加工が不要で便利！

2023年9月5日

R.U.I

背景に画像を設定して、その上にテキストを乗せるというデザインを作る際、背景画像が派手だったり鮮やかだったりするとなかなかテキストが見づらいですよね。

そういうとき、画像を暗くしないと・・・となりませんか？

いえいえ。そこで良い方法があります。

画像編集をせずとも、画像はそのままにCSSだけで画像を暗くする方法を紹介します！

この記事の著者

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。プロフィール詳細やレビューガイドライン

コピペで簡単！背景画像をCSSだけで暗くする方法

使うものは、「background-color: rgba(0,0,0,.7);」のような CSS です。

背景色を真っ黒にし、透明度を設定し、「position: absolute;」にてその背景色を画像よりも上にもってきて画像を暗くするという作り方です。

背景を暗くする前

これだと、文字が全然見えないですよね。

背景を暗くしてみましょう。

暗くするととても見やすくなりました！

これを実現する HTML / CSS コードの紹介をしていきましょう。

背景画像をCSSだけで暗くするためのHTMLコピペコード

まず、HTMLはシンプルに。

<div class="contents-frame">
  <p class="text-zone">テキストをここに入力</p>
</div>

背景画像をCSSだけで暗くするためのCSSコピペコード

CSSはこちら。

.contents-frame {
  background-attachment: fixed;
  background-image: url(画像URL);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height:100vh;
/*中に入るもの（テキスト）を縦横中央に配置*/
  display: flex;
  align-items: center;
  justify-content: center;
}
  .contents-frame::before {
  content: '';
  background-color: rgba(0,0,0,.7);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/*テキストを大きく、白い太文字に*/
.contents-frame .text-zone{
  position:absolute;
  font-size:2.8rem;
  color:#fff;
  font-weight:bold;
}

少し解説の文字も入れてみました。

「background-color: rgba(0,0,0,.7);」で背景色を黒くして透明度の指定を70%（透明度30%）に、「position: absolute;」〜で背景を画像の上＆配置する形です。

上に乗せる文字は背景画像を暗くしているので「.text-zone」にて白文字・太文字・大きめにしました。