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の指定がめんどくさそうと思う方もいるかもしれませんね。赤、緑、青の絵の具を混ぜる間隔でやってみてください。
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;}まとめ
決まり文句で申し訳ありませんが、IE8以下はRGBaは利用できません。IEきえろきえろー
透明度もCSS3からメジャーなテクニックになってきましたが、IE8以下未対応ということでなかなか使いどころが難しいですね。
その辺を考慮して無理なくご利用は計画的に。
