rgba()でボックスを透過させる
要素を透明にするプロパティに、opacityプロパティがあります。
ただopacityプロパティだと要素全体に適用され、
テキストなどがある場合、そのテキストにも透明の効果が適用されます。
そこでdiv要素などのボックスのみ透明にしたい場合は、rgba() を使用します。
.transparent {
background-image: url("sakuraimg.jpg");
height:300px;
padding:15px 0px 0px 15px;
}
.item {
background-color:rgba(255,255,255,0.5);
width:300px;
}
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
上記サンプルでは分かりやすいよう、後ろのボックスに背景画像を指定しました。
色はRGBカラーにて指定します。
background-color:rgba(255,255,255,0.5);
例えば白なら、255,255,255となります。
最後に透明度を指定します。（0~1.0まで)
※なお、rgba()はIE8以下では対応していないのでご注意を。
[zenback]
