主に IT 技術を整理するためにメモ的に書き溜めています。少しだけフリーソフトもあるよ。コメントを残すには、 facebook を使ってください。

透過 PNG を IE6 で扱う

最終更新日 2007-12-27 01:13:06 (1年以上前の記事です)

最近知ったんだけど、 PNG 画像の Transparent 部分って IE6 ではきちんと透明に表示されないらしい。
これをどうにか FF とか他のブラウザでも表示されるようにしながら対応する方法。

基本的なやり方は CSS で background と filter を使って、以下のようにすれば表示はされるようだ。

background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hello.png',sizingMethod=scale);
width: 160px;
height: 120px;

でもこれだけじゃ当然 FireFox では表示されない。じゃーどうするか。

ここで紹介する方法は IE では上記の CSS が反映され、 FF では img タグで画像を表示する方法。
まず HTML の部分を見てみると

HTML

<span id="hello"><img src = "images/hello.png" /></span>

という感じ。
考え方としては hello の背景に先ほどの CSS を適用し、 IE だったら img の display を none にする。

CSS

span#hello
{
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hello.png',sizingMethod=scale);
    width: 160px;
    height: 120px;
}
span#hello img
{
    display: expression("none");
}

こうやって IE でしか動かない expression を使ってやるとうまくいく。
にしてもめんどくさい。

最終更新日 2007-12-27 01:13:06

コメント このエントリーをはてなブックマークに追加

フリーソフトウエア
EnjoiFLV
EnjoiPacket
EnjoiCrypto
ランキング
rank2, rank3, rank7, rank10, rank11
todo メモ
facebook 対応
ページ処理
RSS feed
検索機能
認証いる?
更新日表示
実はカテゴリ機能
多言語
実はユーザ機能
ソースその内公開
動作環境メモ
php-5.1.6 with PDO
SQLite-3.3
IE6
FireFox-1.5
RSS
非認証

検索
Google