CSSだけで背景画像を暗くしたりimg画像を暗くする方法！

今回はCSSのbackground-imageを使って表示した背景画像や、<img>タグを使って表示した画像を暗くする方法を紹介します。

CSSのbackground-imageの画像を暗くする
imgタグで表示した画像を暗くする方法
まとめ

CSSのbackground-imageの画像を暗くする

まずはCSSのbackground-imageで表示した背景画像を暗くする方法です。

やり方としてはbackground-imageで背景画像を表示し、擬似要素で画像全体を覆うように半透明の黒いオーバーレイをかけます。

デモはこんな感じ↓

See the Pen
rNejjqX by wagashi000327 (@wagashi000327)
on CodePen.

コードは以下の通り。

HTML

<div class="bg-image">
  <p class="text">中央にテキスト</p>
</div>

CSS

/* 背景画像を表示 */
.bg-image {
  background: url(https://dezanari.com/wp-content/uploads/2020/08/spring-276014_1280.jpg) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 250px;
  position: relative;
}
/* 画像を暗くするオーバーレイ */
.bg-image::before {
  content: '';
  /* ↓暗いオーバーレイを半透明で配置 */
  background-color: rgba(0, 0, 0, 0.4);
  /* ↓全体を覆うように配置 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* テキストを中央寄せ */
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

ついでに中央にテキストを乗せてみました。

.bg-imageで背景画像を表示しています。.bg-image::beforeにbackground-color: rgba(0, 0, 0, 0.4)とすることで擬似要素に黒の半透明のオーバーレイを配置します。これで画像を暗くするわけですね。

またposition: absoluteで絶対配置にし、画像全体を覆うようにwidth: 100%; height: 100%;も書いておきましょう。display: blockも入れておくと変な事故を防げる気がします。

CSSで表示した背景画像を暗くする方法はこんな感じです。

imgタグで表示した画像を暗くする方法

CSSのbackground-imageで表示した画像ではなく、<img>タグを使って表示した画像を暗くする方法です。

やることは基本同じです。<img>を囲むタグに擬似要素を作って、画像全体を覆う半透明の暗いオーバーレイをかけます。

デモはこんな感じ↓同じように画像が暗くなっていますね。

See the Pen
JjXEWrN by wagashi000327 (@wagashi000327)
on CodePen.

コードは以下の通り。

HTML

<div class="bg-image">
  <img src="https://dezanari.com/wp-content/uploads/2020/08/spring-276014_1280.jpg" alt="">
  <p class="text">中央にテキスト</p>
</div>

CSS

.bg-image {
  position: relative;
}
img {
  width: 100%;
}
/* 画像を暗くするオーバーレイ */
.bg-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

まずは<img>を<div>などで囲みましょう。そして囲んだタグに::beforeで擬似要素を作り、background-color: rgba(0, 0, 0, 0.4)黒の半透明のオーバーレイを配置します。

この方法でも同じようにオーバーレイをposition: absoluteで絶対配置にし、width: 100%; height: 100%;で画像全体を覆います。