画像編集せずCSSで画像を暗くする方法を現役エンジニアが解説【初心者向け】

初心者向けに画像編集せずCSSで画像を暗くする方法について解説しています。写真の上に文字を入れたりする際に、Photoshopなどの画像編集ソフトを使わずにCSSのみで画像を暗くする方法を紹介します。基本の書き方を覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

画像編集せずCSSで画像を暗くする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

画像編集せずCSSで画像を暗くする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

画像を暗くした方が良いケース

Webを制作している場合、下記のような処理が必要になるときがあります。

  • 画像の上に文字を載せたい
  • 背景イメージの上に見出しを載せる
  • 画像の説明文を加えたりする
  • 画像の上に文章を載せたい
  • 様々な場面で画像の上に文字・文章を載せる

そのような場合、画像の上に文字を載せると上手くいかないケースが想定されるでしょう。

例えば、下記の画僧では、画像の色が濃かったり、濃淡がはっきりしていたりして、文字を載せても目立ちません。
イメージ通常

そのような時であれば、画像を暗くすることによって文字を目立たせ効果的に見せる方法があります。

Photoshopなどで画像を暗めに加工して使用するという選択肢もあり、今回はCSSだけで簡単にできる方法をみていきましょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

CSSで画像を暗くする方法

CSSでbackground要素のあるボックスを作り、その背景の上に透明度を設定した色を重ねる方法をみていきます。

手順としては、背景写真を表示する親ボックスをposition: relative;とし、文字を置く子ボックスをposition: absolute;にして重ねます。

背景写真の上に黒い透明なシートを載せるようなイメージです。

 

実際に画像を暗くしてみよう

実際にhtmlとCSSの記述を確認していきましょう。

親ボックスをboxbackground、子ボックスをbox1とします。

html

<div class="boxbackground">
<div class="box1">
<h1>TECHACADEMY</h1>
<p>TECHACADEMY</p>
</div>
</div>

 

子ボックスbox1は背景色を黒(background: rgba(0, 0, 0, 0.5);)として、50%の透明度を設定しましょう。

CSS

.boxbackground {
  position: relative;
  width: 800px;
  height: 500px;
  background: url("images/image1.jpg");
  background-size: cover;
}
.box1 {
  position: absolute;
  width: 800px;
  height:300px;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding-top:200px;
}
h1,p{
  color: rgba(255, 255, 255, 1);
}

実際の結果を見てみましょう。
イメージcssで暗く
見出しの文字の視認性がアップし、クールな印象に変わりました。

このようにして画像を編集せずにCSSの記述だけで画像のトーンを変え、上に載せたテキストを見やすくすることが可能です。

 

執筆してくれたメンター

井川宏樹

フリーランスのデザイナーとして活動中。

主に事業系企業の自社サービスのデザイン、Webサイトなどの制作・構築をしております。

TechAcademyではWebデザインコース、WordPressコースを担当しています。

また作曲等の音楽家としても活動中。

 

大石ゆかり

画像編集せずCSSで画像を暗くする方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。