背景レイヤーのみ透過させる方法

ちょっと目からウロコ。
へぇ～ってなったのでメモメモ。

<div class="box">
  <img src="xxx.jpg">
  <span>テキスト文字列テキスト文字列</span>
</div>

背景を透過させたいので、div要素にclassをつけて、opacityを設定します。

.box {
    background-color: #000;
    color: #fff;
    opacity: 0.8;
}

この方法だと、img要素や文字列も透過してしまうのでNG。
div要素だけ透過させたいので、下記の記述を行います。

.box {
    background-color: #000;
    color: #fff;
    background-color:rgba(0,0,0,0.8); /* backgroundでalpha設定(4番目の引数) */
}

こんなにシンプルにできるのに知らなかった。
おしゃれサイトは透過したがるからなぁ～。

うぐぐ、IE8以下は効かないので、下記設定を追加。

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff); /*IE8以下用*/