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

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

使用できるプロパティ

background-color
border-color
color

指定方法

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

RGBaサンプル

RGBaってなんだよ!という方へ向けたメモ
上の図はRGBaの透明度を0.1~1で10通り指定したものです。

html

CSS

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

demo

opacityとの使い分け

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

html

CSS

demo

まとめ

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

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク