IE6でも半透明のpng画像を表示するＣＳＳテクニックの備忘録
Posted under: IE7からはpngを表示してくれるのですが、それまでのバージョンでは表示されないので、
ハックを使ったIE6でもpng画像を表示させる方法の備忘録。
ちなみに、スクリプトを利用してもできますので、そちらの方法はサクっと検索すると出てきます ＾＾；
っということで、スクリプトでもできますが、ＣＳＳで表示する方法の備忘録
例えば、div の中に画像を表示するとして、divタグに sample っていうクラスを指定します。↓
1 2 3 | <div class="sample"> <img src="../img/sample.png" alt="半透明png" width="250" height="200"> </div> |
このままだと、IE7以上とその他のモダンブラウザでは表示しますが、
IE6はだめなので、sample っていうクラスにハックをあてたCSSを追加します。↓
1 2 3 4 5 6 7 8 9 10 | * html div.sample{ width:250px; /* 画像の幅（必須） */ height:200px; /* 画像の高さ（必須） */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=../img/sample.png); } * html div.sample img{ display:none; } |
※ widthとheightの大きさは表示される画像と同じに。
これで、IE6でもpng画像が使えます。
ちなみにdivタグとかで、背景を指定したい場合に有効なCSSはこちらが詳しいです。
こちらも合わせてご覧ください - このページの内容と関連がある記事 -
TrackBack URL for this entry
コメントをいただけると励みになります！よろしくお願いします。
Blog info
Recommend Servers
