CSSのリファレンスには、[画像の透明度を設定する方法][1]と[背景画像を設定する方法][2]が掲載されています。しかし、この2つを組み合わせて、透明な背景画像を設定するにはどうすればよいのでしょうか?
背景に使いたい画像があるのですが、明るすぎて、不透明度を0.2くらいにしたいと思っています。どうすればいいでしょうか?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
[1]: http://www.w3schools.com/css/css_image_transparency.asp [2]: http://www.w3schools.com/css/css_background.asp
#main {
position: relative;
}
#main:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;
}
2つの方法があります。
1.PNGに変換し、元の画像を0.2の不透明度にする
2.(より良い方法) #main
の前に position: absolute;
で、#main
と同じ高さの <div>
を用意し、background-image と opacity: 0.2; filter: alpha(opacity=20);
を適用する。