[bookmark] CSS(opacity:0~1;)で要素の透過値取得と変更のメモ

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>

カテゴリ:

トラックバック(0)

トラックバックURL: http://www.0yen-coding.com/mt-tb.cgi/118

コメントする

あわせて読みたいブログパーツ