CSSだけで画像を暗くする方法【画像加工する時間を節約】

画像に文字を乗せた時に、見づらいから画像を少し暗くしたい時ってありますよね。また、画像が明るすぎるので暗くして雰囲気を出したいなんて時も。

でも、画像編集ソフトで加工してまたアップロードし直すのとかけっこうめんどくさいですよね。

1枚だけならまだしも何枚もってなるとかなり時間持ってかれます、、

画像そのものを編集することなく、CSSだけで画像を暗くすることは可能です。

今回は用途に分けて、2つの方法を紹介します。

①CSSだけで一番簡単に画像を暗くする方法

一番簡単な方法です。シンプルに画像を暗くしたい時はこの方法を使いましょう。

画像の上にテキストをのせる場合は、この方法はおすすめできません。理由は次章で説明します。

HTML

<div class="img-wrap">
    <img src="http://namagomi-days.com/wp/wp-content/uploads/2019/02/sea.jpg" alt="">
</div>

CSS

.img-wrap {
  background-color: #000000;
}
.img-wrap img {
  display: block;
  opacity: 0.7;
}

手順は以下の通り。

imgタグをかこむ親要素を作ります。ここではdivタグを使用。
そのdivタグにbackground-color: #000000;を指定します。
imgタグにopacityを指定。opacityは透明度を指定するプロパティです。

つまり、画像を半透明にし、後ろの黒背景が透けて見えることで画像が暗くなるということです。

元の画像と比較してみましょう。

See the Pen
darken the image by ken (@ken_shindo)
on CodePen.

プレビューの上の画像が暗くする前の実際の画像です。

下の画像はCSSの記述によって暗くなっています。一目瞭然ですね。

②背景画像をCSSだけで暗くする方法

imgタグで表示させた画像よりも、backgroundで背景として表示させた画像を暗くしたいという時の方が多いと思います。

前章「1.CSSだけで一番簡単に画像を暗くする方法」のやり方でも背景画像を暗くすることは可能ですが、中のテキストなども一緒に暗くなってしまうという欠点があります。

背景画像の上にテキストを乗せる場合は、中の要素はそのままに、背景画像だけ暗くするテクニックを使いましょう。

背景画像を暗くするおすすめの方法

HTML

<div class="bg">
  <div class="bg-inner">
    <h1>夏は、海に行こう。</h1>
  </div>
</div>

CSS

.bg {
  background: url(http://namagomi-days.com/wp/wp-content/uploads/2019/02/sea.jpg) center center no-repeat;
  background-size: cover;
  padding: 150px 0px; /*背景画像の高さを確保*/
  position: relative; /*中の要素の基準値*/
}

.bg:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /*半透明のフィルターをかける*/
}

.bg-inner {
  text-align: center;
  position: absolute;
  width: 100%;
}

See the Pen
darken the bg-image by ken (@ken_shindo)
on CodePen.

かんたんに説明すると、黒い半透明のフィルターを上に重ねているイメージです。

解説(詳しく知りたい人向け)

どういうしくみになっているか分けて解説します。くわしく知りたい人だけ見てみてください。

背景画像を指定した要素(.bg)

.bg {
  background: url(http://namagomi-days.com/wp/wp-content/uploads/2019/02/sea.jpg) center center no-repeat;
  background-size: cover;
  padding: 150px 0px; /*背景画像の高さを確保*/
  position: relative; /*中の要素の基準値*/
}

まずは背景画像を表示させ、paddingで高さを確保します。position: relative;を指定し、中に入れる要素の基準値とします。

半透明のフィルター(.bg:before)

.bg:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /*半透明のフィルターをかける*/
}

背景画像を指定したクラスの疑似要素(before)にbackground-color: rgba(0, 0, 0, 0.5);で黒い半透明のフィルターを背景画像の上にかぶせます。

最後の0.5という数字を上げればさらに暗く、下げれば暗さが薄まります。

rgbaは、色と透明度を一緒に指定できる記述方法です。下記コードと同じ指定になります。

.sample {
    background-color: #000000;
    opacity: 0.5;
}

position: absolute;を指定し、top、bottom、left、rightを全て0に指定します。これを指定すると、フィルターが全体に広がり、背景画像を覆います。

中の要素(.bg-inner)

.bg-inner {
  text-align: center;
  position: absolute;
  width: 100%;
}

position: absolute;を指定することで中の要素が浮きます。それによって、さきほどかけたフィルターの影響を受けないというしくみです。

ちなみにposition: relative;でもOK。

まとめ

CSSで画像を暗くする2つの方法を紹介しました。状況によって使い分けてください。

画像を暗くしたい主な理由は、画像にテキストをのせた時の視認性を上げたいとかだと思うので、中の要素が影響を受けない背景画像だけ暗くする方法の方が使用頻度が高そうですね。