CSSだけで画像を暗くする・オーバーレイの方法

ホームページのメインビジュアル・ヒーローイメージをちょっと暗くしたいという時に。画像そのものを加工しなくてもCSSだけで画像を暗くすることができます。

画像の上に文字を置きたい時にも、CSSでちょっと画像を加工すればキャッチコピーも見やすくすることができます。

CSSで画像を暗くするメリット

• 画像の上に文字を入れるときに、文字の視認性が高くなる。
• 画像のトーンを変えることで、サイトの雰囲気を変えることができる。
• 画像編集ソフトを使わずに、CSSだけで簡単に画像を暗くするので画像のサイズや品質が変わってしまう心配がない。
• メンテナンスしやすくなる。

CSSで画像を暗くする方法

CSSで画像を暗くする方法はいくつかありますがこの記事では3つ紹介します。

• 背景画像にlinear-gradientを使う
• 背景色を設定して画像に透明度を設定する
• 要素を重ねてmix-blend-modeを設定する

実際に画像を暗くする方法について見ていきます。元の画像は以下のAdobe Stockを使用しています。

背景画像にlinear-gradientを使う

linear-gradientを使う方法では、background-imageプロパティに複数の画像を指定します。

最初の画像として、linear-gradient関数で半透明の黒色から半透明の黒色へと変化するグラデーションを作ります。次の画像として、背景画像を指定します。

これにより、グラデーションが背景画像の上に重なり、暗くなります。background-sizeやbackground-positionなどのプロパティで背景画像のサイズや位置を調整します。

<div class="hero">
      <div class="hero__txt">
        <h3>Let's do it with us!</h3>
      </div>
    </div>

.hero{
      display:flex;
      height:500px;
      background-image:
            linear-gradient(0deg,rgba(32,140,156,.3) 0,rgba(19,46,50,.3) 100%),
            url(../images/AdobeStock_487678350_s.jpg);
      background-size:cover;
      justify-content:center;
}

linear-gradientで画像を暗くするDEMO

背景色を設定して画像に透明度を設定する

背景色を設定にして、画像に透明度を設定する方法。この方法は、背景色と画像の色が混ざって暗くなります。

<div class="hero">
      <div class="hero__img"><img src="images/AdobeStock_487678350_s.jpg"></div>
      <div class="hero__txt">
        <h3>Let's do it with us!</h3>
      </div>
    </div>

.hero{
      position:relative;
      width:100%;
      height:500px;
      background-color:#132e32;
}
.hero__img{
      position:absolute;
      z-index:2;
      overflow:hidden;
      height:100%;
      opacity:.6;
}

背景色とopacityで画像を暗くするDEMO

mix-blend-modeを使う

画像を重ねて、上に重なった画像に乗算モード（mix-blend-mode: multiply）を設定する方法です。この方法は、背景色に関係なく、画像の色同士が乗算されて暗くなります。

上記のmix-blend-modeを適用した画像の例だと、文字の部分が背景画像と合成されているのがわかりやすいと思います。

linear-gradientやopacityを使った方法に比べて、画像のコントラストがくっきりした印象になります。

.hero2{
  position:relative;
  width:100%;
  height:500px;
}
.hero2__img,
.hero2__txt{
  position:absolute;
}
.hero2__img{
  z-index:2;
  overflow:hidden;
  height:100%;
}
.hero2__txt{
  z-index:3;
  top:0;
  left:0;
  display:flex;
  width:100%;
  height:100%;
  color:#fff;
  background-color:rgba(19,46,50,.4);
  mix-blend-mode:multiply;
  justify-content:center;
}

mix-blend-modeで画像を暗くするDEMO

以上が、CSSで背景画像を暗くする方法です。これらの方法は、それぞれ特徴やメリット・デメリットがありますので、状況に応じて使い分けましょう。