CSS3 rgba()

rgba()は、RGBAカラーモデルで色を指定する際に使用する。

RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったもので   alphaは色の透明度を表す。これにより、色の使い方の幅が広がった。

RGBAカラーモデルで色を指定する際には、カンマ（ , ）区切りにした３つの数値でRGBの色を指定した後に、数値で透明度を指定する。 RGBの色は0-255、または、0%-100%で指定する。透明度は、0（完全に透明）～1（完全に不透明）の数値で指定する。RGBA値の指定では、RGB値の指定とは異なり #FFFFFF のような16進表記を使用することはできない。

＜使用例＞

CSSソース
p.sample1 {background-color: rgb(0,0,255);}
p.sample2 {background-color: rgba(0,0,255,1);} 
p.sample3 {background-color: rgba(0,0,255,0.5);} 
p.sample4 {background-color: rgba(0,0,255,0.1);}
p.sample5 {background-color: rgba(0,0,255,0);} 

HTMLソース
<body>
<p class="sample1">背景色に rgb(0,0,255) を指定</p>
<p class="sample2">背景色に rgba(0,0,255,1) を指定、完全に不透明</p> 
<p class="sample3">背景色に rgba(0,0,255,0.5) を指定、半透明</p>
<p class="sample4">背景色に rgba(0,0,255,0.1) を指定、薄い透明</p>
<p class="sample5">背景色に rgba(0,0,255,0) を指定、完全に透明</p>
</body>