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

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

 

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

 

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

 

 

目次

• 画像を暗くした方が良いケース
• CSSで画像を暗くする方法
• 実際に画像を暗くしてみよう

 

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

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

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

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

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

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

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

 

[PR] Webデザインで副業する方法とは

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の記述だけで画像のトーンを変え、上に載せたテキストを見やすくすることが可能です。

 

執筆してくれたメンター

井川宏樹 フリーランスのデザイナーとして活動中。 主に事業系企業の自社サービスのデザイン、Webサイトなどの制作・構築をしております。 TechAcademyではWebデザインコース、WordPressコースを担当しています。 また作曲等の音楽家としても活動中。

 

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

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