読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

opacity vs rgba 細かな違い

CSS

ええ、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 … 技術評論社