ええ、opacityとrgbaの大きな違いは、以下のエントリーに書いています。
CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん!(Hatena)
opacity 画像も文字も透明にし、なおかつ子要素すらも透明にする(このカジュアルさが便利なときもあれば、致命的に不便なときもあるけど)
rgba 文字色、背景色、ボーダー色、それぞれ別個に透明にすることが出来る。画像は透明に出来ない。子要素も透明にならない。
なので、
.hoge { background-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.5); } のように細かく設定することが可能である。 ちなみに、opacityをブラウザごとに設定するのは面倒なので、LESSなら >|css| .opacity (@opacity) { @opacityIE: @opacity*100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacityIE)"; filter: alpha(opacity=@opacityIE); opacity: @opacity; }
こんな風に関数にしたらいいんじゃないだろうか。
第2回 OpacityとRGBa実践テクニック:CSS3大接近|gihyo.jp … 技術評論社