【CSS】画像を暗くして文字をめだたせる簡単テクニックをご紹介

今回は、画像を暗くする方法を紹介します。

下の画像のように、文字がいまいち目立たない・・・。

というときに使えます。

背景画像を暗くして、画像の上に載せた文字をきわだたせることができます。

さっそく見ていきましょう。

背景画像を暗くする方法

背景画像のうえから、黒い半透明のブロック要素を重ねる方法です。

HTML

<div class="bg-img">/* 背景画像を設定する要素*/
　<div class="bg-black"></div>/* 黒い半透明のブロック要素 */
　<p class="white">文字が目立たない。 </p>
</div>

CSS　背景画像の設定

背景画像を設定します。

.bg-img {
 position: relative;　
/* あとで子要素をかさねるのでrelativeを設定*/
 width: 100%;
 height: 500px;
 background-image:url("images/image1.jpg");
 background-size: cover;
}

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

CSS　背景画像の上に黒のブロック要素をかさねる

次に、背景画像のうえから、黒色のブロック要素（半透明）をかさねます。

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

下の画像のように、背景が暗くなり文字がくっきり目立ちます。

まとめ

いかがでしたでしょうか。

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

ぜひみなさんもやってみてください。

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