以Png图片在网页中背景透明问题展开谈png图片格式问题

经我实验，png图片（我指的是带渐变色彩的图片）在fireworks中导出后，插入到页面中，在ie6及Ie6以下的浏览器版本中是无法正常背景透明的，而只有通过加入一段javascirpt代码才能实现背景透明，但也并非所有png图片插入脚本代码后都会透明，以下是我做的实验：

我拿曾经做个的一个网站影子网上的表情图片为例(维护人员在处理这个表情图片时没有注意png图片背景问题)来说这个问题。
将图片在fireworks中分别以“gif 索引色透明”，“gif alpha透明度”，“png8 alpha透明度”，“png8 索引色透明”，“png32”，这五种格式导出 (也行有些人总是用photoshop导出切片，对这个不是很了解，要想清楚的明白，最好装上fireworks打开它的优化面板看看) ，在不加javascript的效果如下：

1，在ie7及firefox中的效果：

2，在ie5.5及ie6中的效果

可以看到ie7中，“png8 alpha透明度”，“png32”这两种格式ie是支持透明的，效果同于原图效果，但在i6中则一个看上去被修去了很多边缘的感觉，另一个背景直接就是不透明的，其他三种格式则一样，无论在什么情况下对这种带渐变效果的图片直接以毛边的效果显示出来，这个显然是我们不想要的。

为了使图片在ie6及以下版本中能显示出透明背景，我们通过加一段javascript来解决这个问题，代码如下（也是从网上摘来的，不难找到）：

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters))
   {
      for(var j=0; j<document.images.length; j++)
      {
         var img = document.images[j]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
            img.outerHTML = strNewHTML
            j = j-1
         }
      }
   }   
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

也可以单独写一个脚本文件通过调入的方式导入到页面文件中，调入后显示的效果如下：

http://hiphotos.baidu.com/bujichong/pic/item/6fd4c11183e8b91bb9127b81.jpg

这个效果看上去就和ie7中看到的效果相同了。


         综上，其实png这种图片格式，大家常讨论他的背景透明与否，往往忽视了我们以什么样的格式导出png图片，所以可能有的人的png图片即使加了脚本代码背景也并不透明，而错认为是脚本的问题。
         而png这种格式作为fireworks的专有格式除了能达到背景透明的效果之外，还有一个好处，有时我们以png8的图片格式导出时（正常导出，即不透明的格式），它的文件大小比我们导出同等清晰度的jpg文件或gif要小很多，这个是真的！大家可以试试看，所以经常也在欧美的一些网站上，虽然很多图并不透明，但他们仍以png的格式导出，想来是在优化图片时，考虑图片大小的因素，直接导出png8的格式图。