CSS WEB制作

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

moon

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

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

というときに使えます。

imglight

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

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

 

 

背景画像を暗くする方法

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

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;
}

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

 

imglight

 

 

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

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

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

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

imgdark

 

 

 

まとめ

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

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

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

 

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

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5