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

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

今回は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::beforebackground-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%;で画像全体を覆います。

 

まとめ

画像を暗くするテクニックは実際の現場でも使われることが多いです。

ホバー時に画像を暗くしたり、グラデーションにしたりと応用が利くので知っておくと便利ですね。