PNGがうまく表示されない・・・。

質問

お世話になります。

PNG画像で分からないことがありますので申し訳ありませんが、わかる方がいらっしゃいましたらお知恵をお貸しください。

以前からホームページでPNG画像を使って重ね合わせて使用していたのですが、最近になりIEのバージョンによって動作が変わってしまうということを知り、確認したところIE5.5とIE6の場合だとPNGの透明部分が灰色になってしまい、背景が見えなくなっていました。

そこでIE5.5～IE6まででも綺麗にみえるようiepngfix.jsというスクリプトを使用してみました。

設定して確認したところ、IE5.5　IE7　IE8とFireFoxで動作を確認することができましたが、IE6でのみPNG部分が映らなくなってしまいました。
（PNGの部分ではなく、背景のJPEGだけしか見ることができません）

下記がソースになります。

<script type="text/javascript" src="png_js/iepngfix.js"></script>
<!--[if IE]>
<script src="iepngfix.js" charset="utf-8" type="text/javascript"></script>
<style type="text/css">
.iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}
</style>
<![endif]-->

<div style="background-image:url(i/samp.gif); height:150px;">
<img src="i/top.png" width="780" height="150" border="0" class="iepngfix" />
</div>

参考サイトをコピーして使用したのですが、うまく動作しませんでした・・・。

すみませんが、どなたか教えていただけませんでしょうか。よろしくお願いいたします。

（ちなみにIEでの動作確認はIETesterというものを使用しております。）

回答No.2

outbrave · ベストアンサー

そのスクリプトは、「PNG画像の背景」を表示するものとみましたが
あなたは、PNG部分が映らなくなってしまいましたと書いていますね
<div style="background-image:url(i/samp.gif); height:150px;">
<img src="i/top.png" width="780" height="150" border="0" class="iepngfix" />
</div>
このソースを見ると背景ではなく、単にPNG画像を表示させているように見えますが、間違いないですか？

CSSでPNGを背景に指定してもIE6でも綺麗に表示されます！！
http://www.designwalker.com/2006/12/transparent-png2.html

透過PNGをIE6以下のバージョンで綺麗に表示するJavaScript
http://www.designwalker.com/2006/12/transparent-png.html

お礼

ご回答が遅くなり申し訳ありませんでした。

教えていただいたURLを参考にまた挑戦したいと思います！

ご回答ありがとうございました。

回答No.1

noname#119957

ＩＥ６は、ＰＮＧの透明をサポートしていませんのでＰＮＧでなく透明ＧＩＦでやるしかないようです。

ＩＥ５はおそらく使用されていないと思います。
（Win-95はＩＥ６が使えます）
**

補足

ご回答が遅くなり申し訳ありませんでした。

結局、透明GIFでやりました・・・。お騒がせいたしました。