IE6で透過PNGをきれいに表示する方法

2008-02-12 08:20 JavaScript

スポンサードリンク

IE6で透過PNGをきれいに表示現在トップシェアのIE6はアルファチャンネルのある透過PNGをサポートしてなくて、当サイトで素材として配布してる透過PNGをそのまま使っても透過せず、背景が透明にならず色がついてしまいます。
なので今回はIE6で透過PNGが使えるようになる方法を紹介します。

その方法と言うのは「Javascriptを利用して透過PNGを使えるようにする」と言うもので、そのライブラリをいろんな方が公開されてて、当サイトではGoogleが配布してる「ie7.js」を使ってます。

これはもともと透過PNG専用のライブラリと言うわけではなくIE6をIE7に近づけるためのライブラリなんですが、透過PNGへの対応も一機能として含まれてて設置方法も非常に簡単なんですよね。

まずは以下のコードを<head>～</head>内に記述してください。


<!--[if lt IE 7]>

<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js" type="text/javascript"></script>

<![endif]-->

xx.xの部分はバージョン名になるので、この記事を書いてる時点「2.0(beta3)」での記述は以下のようになります


<!--[if lt IE 7]>

<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>

<![endif]-->

あとは透過PNGのファイル名の末尾に「-trans」をつけて「○○-trans.png」にして、通常の画像として貼り付ければ完了です。CSSで背景画像として使う場合も同じなので簡単に導入できると思います。

※当サイトで配布してる透過PNG画像はすべて末尾に「-trans」が挿入されてます。
※ie7.jsは現在ベータ版です。ご注意ください。

スポンサードリンク