[CSS3 を使ってみる：第三回] 透明度を持った色を指定する(rgba)

background や color、border などに rgba 指定をすると、透明度を持った色を描画できる。

◆background で rgba を使用した場合のプロパティ

background: rgba(R, G, B, 透明度);
※R/G/B 共に 0〜255 の整数値、もしくは 0%〜100% の整数値+% で指定する。
※透明度は 0〜1 の数値で指定する。80% の場合は 0.8 でもいいし、.8 でもいい。こちらは % 指定はできない。

以下は左の div (id: rgba1) に background で白の透明度 50%、真ん中の div (id: rgba2) に background-color で白の透明度 75% を指定し、全ての div に文字色である color で赤の透明度 30% と枠の border で緑の透明度 25% を指定している。右の div (id: rgb) には background-color で白を rgb で指定してある。

#rgba1, #rgba2, #rgb {
  color: rgba(255, 0, 0, .3);
  border: 3px solid rgba(0%, 100%, 0%, .25);
}
#rgba1 {background: rgba(255, 255, 255, .5);}
#rgba2 {background-color: rgba(255, 255, 255, .75);}

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


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

W3C：
CSS Color Module Level 3