[CSS3 を使ってみる：第四回] 透明度を指定する(opacity)

opacity を指定すると、透明度を指定できる。ただ、background だけとか border だけはできないので、そのような場合は rgba を使えばできる。

◆opacity のプロパティ

opacity: 数値;
※数値は 0〜1 で指定する。80% の場合は 0.8 でもいいし、.8 でもいい。% 指定はできない。

以下は左の div (id: opacity1) に透明度 50%、真ん中の div (id: opacity2) に透明度 70%、右の div (id: opacity3) には透明度 100% で指定してある。

#opacity1 {opacity: .5;}
#opacity2 {opacity: .7;}
#opacity3 {opacity: 1;}

するとこうなる。透明度を与えたスタイルが透けていることが判る。


確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

W3C：
CSS Color Module Level 3