透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる

admin — Wed, 27 Dec 2006 18:06:47 +0000

先日ご紹介した、「透過PNGをIE6以下のバージョンで綺麗に表示する方法」というエントリーなんですが・・・

意外なほどにアクセスがあり、ありがたいことに、現在このブログの一番の人気エントリーになっております。。。

この方法を使えば透過PNGをIE6以下のバージョンで綺麗に表示することができるので、デザインの幅もグッと広がることだと思うのですが。。。問題は。。。

この方法では、imgタグに入れられたPNGファイルのみに有効なため。。。上に文字をのせたりすることができませんでした。。。

っちゅうわけで、透過PNGをCSS（スタイルシート）の背景画像としてあつかえたら、さらにさらに便利やのになぁ～。。。なぁ～んて”韓流”プログラマのユンサンにお話してみたところ。。。

ちょいちょいと作ってくれました～！！！

「透過PNG と IE と IE7」
っという、なんだか、「部屋とYシャツと私」的なタイトルのエントリーでご紹介されております！！

このスクリプトを使いますと。。。

test

こんな感じでCSSでPNGを背景に指定してもIE6でも綺麗に表示されます！！

ちゅうわけで、肝心のやり方のご説明。（プログラマな方は韓流”プログラマのユンサンの方からどうぞ）

1. iepngfix.jsっちゅうスクリプトをダウンロードしてサーバにアップロード（右クリックで対象を保存で。）

2. 透過PNG画像を表示したいhtmlのからの間に

って書いてiepngfix.jsを読み込みます。

3. CSS（スタイルシート）でPNGファイルをバックグラウンド指定してるクラスやIDに以下の一行を追加。

* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}

（赤字の部分はPNG画像を指定したクラス名、もしくはID名を）

これで、IE6や5.5のバージョンでも綺麗に透過PNGを、CSS（スタイルシート）で操ることができますね～！

関連ブログ

透過PNGをIE6以下のバージョンで綺麗に表示する方法

admin — Fri, 15 Dec 2006 18:04:13 +0000

IE7では、やっとこさ標準でサポートされた、透過PNGですが、まだまだIE6以下のバージョンを使ってるユーザーが多いっちゅうわけで、透過PNGを使わないデザイナーさんが多いようですが。。。

透過GIFだと、角を丸くしたりすると曲線がギザギザに表示されて、非常に汚くなってしまいます。。

これまでは。。。↓こんな感じになってしまってました。。

上の↑のサンプルは背景を黒にして、透過GIFを貼り付けた例ですわ。汚いですねぇ。。。

っちゅうことで。。↓こんな感じにしてみました。。

上の↑のサンプルは背景を黒にして、透過PNGを貼り付けた例ですわ。
普通に透過PNGを貼り付けただけだと、IE6以下のバージョンでは、うまく表示されないようなので。。。

この↓JavaScriptを使いますねん。(右クリックで保存してくだされ）

んでもって、ダウンロードしたpngfix.jsファイルをアップロードして、htmlのからの間に以下のコードをコピペ。

<br />
<!--[if lt IE 7.]><br />
<script defer type="text/javascript" src="pngfix.js"></script><br />
<![endif]--><br />

透過PNGだと、アルファの部分も綺麗に表示されるので、デザインの幅もかなり広がりそうですねぇ～。
早速使おっと。

更新情報：
「透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる」
エントリーを追加しました。あわせてお試しください～！(12 27, 2006)