CSSいじるだけだからもっと簡単にできるかと思ったけど、クロスブラウザ問題でややこしくなってますね。だからjQueryとかの外部ライブラリを利用したサンプルが横行してるんだ。
追記:opacityのバグ(IEのhaslayout)
zoom: 1 を適用して回避しているようです。なるほど、よく考えるなぁ。
opacityのCSSサンプル
満足なサンプルソースが見当たらないので作った。
[Safari,Fx3.5,Opera9]opacityでオブジェクトの透過を検証。firefox3.5ではopacityを採用したらしい。
[Fx3.5以前]さて、結果はいかに。
[IE]IEではopacityはhaslayoutのバグがある。
<blockquote>
<style>
p.opaopa{opacity:0.5;}
p.opaopa-moz{-moz-opacity:0.5;}
p.opaopa-ie{filter: alpha(opacity=50); zoom:1;} /*←zoom:1;でhaslayoutの問題を解消。*/
</style>
<p class="opaopa">[Safari,Fx3.5,Opera9]opacityでオブジェクトの透過を検証。firefox3.5ではopacityを採用したらしい。</p>
<p class="opaopa-moz">[Fx3.5以前]さて、結果はいかに。</p>
<p class="opaopa-ie">[IE]IEではopacityはhaslayoutのバグがある。</p>
</blockquote>
コメントする