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]

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る