プログラミング

【CSS】画像を暗くする方法 これができれば文字が目立ちます

スポンサーリンク

moon

プログラミングを勉強中のみなさん、こんにちは!

今回は、画像を暗くする方法を紹介します。
これができると、画像の上に載せた文字をきわだたせることができます。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

それでは見ていきましょう。

コードの紹介

背景画像の設定

まず、背景画像を設定します。

.boxbackground {
position: relative; →親要素になるのでrelativeを設定
width: 100%;
height: 500px;
background-image:url("images/image1.jpg");
background-size: cover;
}

こんな感じで背景画像を設定します。
※文章のコード(HTML)は省略します。

imglight

このままでは、まだ文字が目立ちません。

黒色のブロック要素をかぶせる

次に、背景画像のうえから、黒色のブロック要素(半透明)をかぶせます。

.box1 {
position: absolute; →背景画像にかぶせる
width: 100%;
height: 500px;
background: rgba(0, 0, 0, 0.5); →背景カラーを黒、半透明にして暗くします
}

このように、背景画像に、黒色のブロック要素をかぶせて、それを半透明にすることで暗くします。

imgdark

こうすると、文字がくっきり目立ちます。

まとめ

背景画像自体を暗くせず、
暗い半透明の要素をかぶせることで、画像が暗くなっているように見せます。
こうすると文字が目立ち、かっこよく見えます。

是非みなさんもやってみてください。

「透過」に関連する記事も紹介しておきます。

スポンサーリンク

-プログラミング
-, , , , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5