CSSで背景を半透明にする

今このBlogでも使ってる、ブロック要素を半透明に表示するやり方。
本文を載せているブロックの後ろに背景が見えてとってもお洒落ですね。背景画像を存分に活かす事が出来ます。
コレを実現する方法についてですが、いくつかやり方があります。
今回は以下の二つを確認しました。

opacityを使う方法

#sample {
    background-color: black;
    opacity: 0.6;                   /*Firefox, Opera, Chrome, Safari用*/
    filter: alpha(opacity=60);  /*IE8以下用*/
}

sampleで指定されたブロックの背景が黒の不透明度60%に設定されます。
数値は opacityが0.0～1.0、filterが0～100です。
ただこの方法の問題点というか特徴としては、このブロックに含まれている要素（例えば文字や画像）全てが半透明になってしまう事です。
そういう狙いがあるなら良いですが、そうでない場合は困りどころですね。



rgbaを使う方法

#sample {
  background-color: rgba(0, 0, 0, 0.6);
}

sampleで指定されたブロックの背景が黒の不透明度60%に設定されます。
パラメータは rgba(赤, 緑, 青, 不透明度) の並びになっています。
色の数値は0～255、不透明度の数値は0.0～1.0です。
こちらは指定したブロックの背景のみが半透明になります。
問題点としては、IE8以前のIEに対応していない点です。