IE6でも半透明のpng画像を表示するCSSテクニックの備忘録

2010 年 4 月 23 日 by     No Comments    Posted under: css, css-応用編

IE7からはpngを表示してくれるのですが、それまでのバージョンでは表示されないので、
ハックを使ったIE6でもpng画像を表示させる方法の備忘録。

ちなみに、スクリプトを利用してもできますので、そちらの方法はサクっと検索すると出てきます ^^;

っということで、スクリプトでもできますが、CSSで表示する方法の備忘録

例えば、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はこちらが詳しいです。


posted by そば富泉


こちらも合わせてご覧ください - このページの内容と関連がある記事 -

TrackBack URL for this entry

コメントをいただけると励みになります!よろしくお願いします。

4 + 15 =
Please leave these two fields as-is: