Single Article

CSSで不透明度を設定する:CSS

opacityプロパティはCSS3のcolor module勧告候補にあるプロパティで、Firefox2、Opera9、Safariが対応している。opacityは不透明度を表し、transparency(=透明度)とは逆になるので注意が必要。つまり、opacity:10%の場合、=transparency:90%でほとんど透明となる。

IEではopacityプロパティに対応していないので、以下のようにfilterプロパティ(IE独自拡張)を適用するしかない。

.transparent {
filter: alpha(opacity=90);
opacity: 0.9;
}

なお、Firefox1.5以下ではopacityに対応していないため、Mozilla系ブラウザ用の独自拡張である、「 -moz-opacity: 」を入れていたが、こちらはFirefox2の普及状況を鑑みれば不要と思われる。

また、opera8以下も同様にopacityに対応していないが、こちらには透明を設定する手段が無い。

なお、テキストなどの情報に対して適用するとIEではうまく表示できない場合がある。

Related Posts

Trackback URL

Post a Comment

Your email is never published nor shared.