↓ 一度使ったら手放せません ＾＾； とにかく動作が軽くて安心！オススメです ↓
IE7からはpngを表示してくれるのですが、それまでのバージョンでは表示されないので、
ハックを使ったIE6でもpng画像を表示させる方法の備忘録。
ちなみに、スクリプトを利用してもできますので、そちらの方法はサクっと検索すると出てきます ＾＾；
っということで、スクリプトでもできますが、ＣＳＳで表示する方法の備忘録
例えば、div の中に画像を表示するとして、divタグに sample っていうクラスを指定します。↓
<div class="sample">
<img src="../img/sample.png" alt="半透明png" width="250" height="200">
</div>
<img src="../img/sample.png" alt="半透明png" width="250" height="200">
</div>
このままだと、IE7以上とその他のモダンブラウザでは表示しますが、
IE6はだめなので、sample っていうクラスにハックをあてたCSSを追加します。↓
* html div.sample{
width:250px; /* 画像の幅（必須） */
height:200px; /* 画像の高さ（必須） */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=../img/sample.png);
}
* html div.sample img{
display:none;
}
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はこちらが詳しいです。
