WEB Tips デザイン・コーディング

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

2015-01-12

本記事にはプロモーションが含まれています。

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

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

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

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

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

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

CSSで画像を暗くする方法

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

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

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

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

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, デザイン・コーディング
-