[CSS]RGBaってなんだよ！という方へ向けたメモ

opacity同様、透明度を指定するCSS3のプロパティ。
background-colorなどとの併用で色と透明度を同時に指定できます。

使用できるプロパティ

background-color
border-color
color

指定方法

background-color:rgba(赤,緑,青,透明度);

と指定します。
それぞれ「赤,緑,青」は0～255で指定、透明度は0～1で指定。(0.1や0.555等)

RGBaサンプル

上の図はRGBaの透明度を0.1～1で10通り指定したものです。

html

<div class="demo-box demo-1">
	背景の色をRGBaで指定してます。
</div>
<div class="demo-box demo-2">
	背景の色をRGBaで指定してます。
</div>
<div class="demo-box demo-3">
	背景の色をRGBaで指定してます。
</div>
<div class="demo-box demo-4">
	背景の色をRGBaで指定してます。
</div>
<div class="demo-box demo-5">
	背景の色をRGBaで指定してます。
</div>
<div class="demo-box demo-6">
	背景の色をRGBaで指定してます。
</div>
<div class="demo-box demo-7">
	背景の色をRGBaで指定してます。
</div>
<div class="demo-box demo-8">
	背景の色をRGBaで指定してます。
</div>
<div class="demo-box demo-9">
	背景の色をRGBaで指定してます。
</div>
<div class="demo-box demo-10">
	背景の色をRGBaで指定してます。
</div>

CSS

.demo-1 {background-color:rgba(0,50,100,0.1);}
.demo-2 {background-color:rgba(0,50,100,0.2);}
.demo-3 {background-color:rgba(0,50,100,0.3);}
.demo-4 {background-color:rgba(0,50,100,0.4);}
.demo-5 {background-color:rgba(0,50,100,0.5);}
.demo-6 {background-color:rgba(0,50,100,0.6);}
.demo-7 {background-color:rgba(0,50,100,0.7);}
.demo-8 {background-color:rgba(0,50,100,0.8);}
.demo-9 {background-color:rgba(0,50,100,0.9);}
.demo-10 {background-color:rgba(0,50,100,1);}

とこんな感じです。
難しいことはないんですが、RGBの指定がめんどくさそうと思う方もいるかもしれませんね。赤、緑、青の絵の具を混ぜる間隔でやってみてください。

demo

opacityとの使い分け

冒頭でチラッと出てきましたopacityとの違い。
結論から言うとopacityで透明度を指定すると要素内全体にopacityがかかってしまします。
よって要素内、個別に透明度を指定したい場合はRGBa、全体に透明度を指定したい場合はopacityということでいいのかな？と思います。

html

	opacityで指定してます。


	opacityで指定してます。


	opacityで指定してます。


	opacityで指定してます。


	opacityで指定してます。


	opacityで指定してます。


	opacityで指定してます。


	opacityで指定してます。


	opacityで指定してます。


	opacityで指定してます。

CSS

.demo-1 {background:#036; opacity:0.1;}
.demo-2 {background:#036; opacity:0.2;}
.demo-3 {background:#036; opacity:0.3;}
.demo-4 {background:#036; opacity:0.4;}
.demo-5 {background:#036; opacity:0.5;}
.demo-6 {background:#036; opacity:0.6;}
.demo-7 {background:#036; opacity:0.7;}
.demo-8 {background:#036; opacity:0.8;}
.demo-9 {background:#036; opacity:0.9;}
.demo-10 {background:#036; opacity:1;}

demo

まとめ

決まり文句で申し訳ありませんが、IE8以下はRGBaは利用できません。IEきえろきえろー

透明度もCSS3からメジャーなテクニックになってきましたが、IE8以下未対応ということでなかなか使いどころが難しいですね。
その辺を考慮して無理なくご利用は計画的に。