CSS3 opacity 透過

opacity、これは要素そのものを透過させるcss3のプロパティである。確認ブラウザ、Chrome14.0 Firefox7.0 IE未対応

記述方法

プロパティ「opacity」は要素に指定する。rgbaプロパティは要素内の部品個々に指定するのに対し、opacityプロパティは、指定された要素全体が透過されるところが異なる。

指定したい要素に、{opacity:0.5;}とするだけ。これで、その要素全体を50%透過したものになる。数値はアルファチャンネルと同じ様に0~1の値を指定する。しかしながら、色の透過を指定するものではないために、あらかじめ色の指定がされている必要がある。まぁもっともな話ではあるが、いまひとつこのプロパティの使い道が想像できない…。マウスを乗せた時なんかのロールオーバーのimgに使うと便利かもしれない。

opacity:0.2;

opacity:0.4;

opacity:0.6;

opacity:0.8;

hoverにopacity:1;を指定した例。ただし、以下はPタグの中にアンカーがあるが、Pタグに色が付いているとうまくいかない、アンカーのみに色をつけるようにする。

opacity:0.5;