如何让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 即可