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で画像を薄暗くする命令があればいいんですけどね。
と言うわけで、ご参考に！
