非天マザー by B-CHAN

iPhoneの使い方、IT、金融、経済、不動産、保険、ビジネス、音楽、映画、ニュース、自己啓発などを語ります。

HTMLとCSSでウェブページの背景画像を薄暗くする方法

background-image

 

 

久しぶりでも無いですが、今回はHTML、CSSの学習記事。

素人のボクが苦労したので、忘れないように書いておきます。

 

ブロック要素に背景画像を指定するのは、CSSで、

 

background-image

 

を使えばカンタン

です。

 

問題は、その画像を薄暗くする方法。

CSSにそれを実現する直接的な方法は無いようです。

 

なので、別の方法を使います。

 

 

透過色を重ねる

 

 

考え方はカンタンで、背景画像を表示したブロック要素に、別の黒いブロック要素を重ね、その黒を透過させればいいんです。

 

例えば、こんなHTML。

 

<div class="bg">

  <div class="bg-black">

  </div> 

</div>

 

bgには背景画像があり、bg-blackは、真っ黒な背景色で塗りつぶします。

 

background-color: rgb(0, 0, 0);

 

ですね。

 

CSSを見てみましょう。

 

.bg {

  background-image:url("image.jpg");

  height: 500px;

  width: 500px;

  position: relative;

}

 

.bg-black {

  background-color: rgba(0, 0, 0, 0.6);

  height: 500px;

  width: 500px;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}

 

ポイントは透過、つまり、

 

rgba

 

を使っている点ですかね。

上記の例では、透過度は0.6ですが、数値が大きいほど透明度が低くなる、つまり画像が暗くなります。

 

実際に、上記のHTMLとCSSをそのまま使って、やってみます。

 

まずは、元の画像。

 

 

 

それから、これが、暗くした画像。
 

 

 

画像自体には何も加工していません。

はてなブログは、HTMLに勝手にスペースや記号が入ってしまったりするので、もしかしたら、キレイに重なって表示されていないかもしれませんが。

 

ホントは、HTMLとかCSSで画像を薄暗くする命令があればいいんですけどね。

 

と言うわけで、ご参考に!