如何讓PNG格式的透明圖片在IE6下正常顯示

原文: Make PNG transparency work in Internet Explorer
翻譯:PARAN

初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常丑陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。

我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:

Mozilla Firefox

PNG透明圖片在Mozilla Firefox下顯示良好。

 

Internet Explorer 6

在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白:)

 

解決方法

首先，為你的圖片外套一個DIV層，像這樣:

<body> <div class=”flower”></div> </body>

然后，在CSS文件里面寫入:

 

 body {background-color:#000} div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}

 

呃，這是指Mozilla Firefox,要讓其在IE6下面正常顯示，你應該在<head>和</head>之間寫入:

<!–[if gte IE 5]> <style type=”text/css”> div.flower { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’); } </style> <![endif]–>

這樣，就OK了,下面是加了上面代碼后的IE顯示圖:

 

如果還是不太明白的話，你可以下載演示看看.

注意如果是這樣會使得圖片的鏈接失效。
如果是在頁面上直接顯示png圖片的話，可以直接插入圖片。如此演示

如果要去掉圖片鏈接上的邊框，在<imag>中加入border=0 即可