2009年12月10日木曜日

CSSのRGBA記法について

color: rgba(255, 255, 255, 0.5);

上記のようにCSSを記述することで、白色で透明度が0.5の要素が記述できる。
rgba()記法の左3つの値は、左から赤、緑、青。
これらは0-255、もしくは0%-100%で指定できる。
で、一番右の値が透明度で、0-1の間で指定できる。
0に近づくほど、透ける割合が大きくなる。

ちなみにopacityプロパティとの違い。
CSS3大接近:第2回 OpacityとRGBa実践テクニック(gihyo.jp)から引用すると、

Opacityプロパティは指定した要素の子要素も透明度が適用されます。正確には指定した要素に含まれる要素すべてに適用されます。一方,RGBaプロパティバリューは指定した要素の子要素へ,もしくは,ふくまれる要素には,その値は適用されず,それぞれの要素のRGBaプロパティバリューを指定した要素のみに適用されます。

との事。
ざっくり言うと、rgba()記法の方が細かく指定できるので便利。

参考

  1. CSS3大接近:第2回 OpacityとRGBa実践テクニック(gihyo.jp)(ブラウザのRGBaとOpacityへの対応表も)
  2. 24ways(英語)

0 件のコメント:

コメントを投稿


Related Posts Plugin for WordPress, Blogger...