半透明pngを表示する

pngならgifと違って半透明の画像を作ることも可能です。しかし、IE6ではそのままでは半透明のpng画像を表示することは出来ません。今回のテクニックは、その壁を打ち破るものです。

テクニック使用前（半透明pngをただ指定しただけ）

テクニック使用後

firefoxと表示の比較をしてみるとわかりやすいです。

やり方

１：HTMLを書く

HTMLはこんな感じになります。

HTML解説

imgタグ一つですませたいところですが、残念ながらそれは無理です。どうしてもdivで囲んであげる必要があります。

２：スタイルシートを書く

スタイルシートはこんな感じになります。

* html div.sample{
    background-image:url(../../img/head-menu-back.gif);
    width:250px;
    height:200px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=../img/a-png.png);
}
* html div.sample img{
    display:none;
}

CSS解説

今回のポイントは２つ。一つはスターハックと呼ばれる技法です。スターハックとは「IE6以下」にのみ適用させたいCSSを書くときに利用する物で、「* html 」を適用させたいID/classの前に付け加えることで利用できます。
今回の場合はpngが普通に使えるIE7やfirefoxにはフィルターを適用させないために使っています。

もう１つは赤字のフィルター部分です。このフィルターを使えば、IE6でも半透明のpngを使うことが出来ます。しかし、このフィルターで読み込んだpng画像は、背景画像のような振る舞いをするので、一工夫必要になります。

まず.sampleの高さと幅を、用意したpng画像と同じサイズに固定します。つづいてフィルターを使ってpng画像を読み込みます。

このままだとimgタグが邪魔してIE6では透明でないpng画像しか見えないので、* html div.sample imgにdisplay:none;を指定してimgタグを非表示にしてしまいます。こうすることでIE6でのみimgタグが非表示となりフィルターで読み込んだpng画像を表示することが出来ます。

最終的にfirefoxとIE7では普通のpng画像、IE6ではフィルターで読み込んだpng画像が表示され、IE,firefoxともに半透明png画像を表示することが出来ます。

2007/07/10追記
IE7に対応するためにスターハック関連の記述を追加。それに伴い解説も変更

使いこなすための＋α

上手く使えば、より高度な表現が可能になると思います。いろいろチャレンジしてみてください。

IE7では半透明png画像をちゃんと読み込めるようになるそうなので、IE7が普及してきたら、CSSからフィルター部分やimgの非表示を取り除いても良いかもしれません。

CSSはファイル一つでいくらでも修正が可能なので、いずれ不具合が修正されて、必要ない部分が出てきてもすぐに削除することが出来ます。

一覧へ戻る