IE6 PNG 图片问题分析

背景：作为web前端的程序员都知道，许多需要使用png图片，但是目前仍然占据大部分市场的IE6却有着png图片背景不能透明的bug，下面分析一下：

一、可解决的方法

1. IE css 滤镜
IE css滤镜中有一个使png背景透明的滤镜，JavaScript方法也是应用的这个滤镜实现png背景透明的。
写法：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’);

用法示例：

.png{background:url(../image/png_test.png);}
* html .png {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’);}

当然，hack方式选择自己熟悉的方式。

2.传统的JavaScript
在页面中写入如下代码：

<script src=”http://www.zhangxinxu.com/study/js/png.js” type=”text/javascript”></script>

这个JavaScript文件是我之前一直使用的使png背景透明的JavaScript文件，它可以让页面上所有的含有透明背景的png图片透明显示，支持background-image的png图片透明，但是不支持background-position定位；另外也不支持type类型为image的input框的png图片透明，使用有局限性。

3.jQuery png背景透明插件
在页面中引入“jquery.pngFix.pack.js”文件。
此js的强大之处在于不仅支持IE6下img标签的png背景透明，background-image的背景透明，还支持image类型的input的png背景透明那个，而且实现的精确控制，即您可以让页面上任意一张png图片背景透明而其他不受影响。

4.使用flash装载png图片
flash对png的透明背景支持非常好，只要用户安装了flash插件，通过flash显示的png图片的背景必定是透明的。
实现的方法有两类，一种适合对flash不太熟的，就是直接将图片嵌入到flash中，方法如下：打开flash软件->设置舞台大小->将png图片拖到舞台（或导入到舞台）->导出flash->将swf插入在页面中->完毕；但是这种方法维护不讨方便，如果要更换图片，还要动flash源文件。另外一种就是与页面交互，从页面获取图片路径，最简单的方法之一就是通过FlashVars传参，再在flash中写上极短代码就可以了。需要至少flash cs3版本的flash软件，直接写在第一帧上就可以了，另外设置舞台大小与图片一样大。

二、产生的问题

1.无法响应单击事件
这个问题在各个解决方法中都是存在的（即使是flash封装png的方法，其本身也不能响应click事件，只能背景透明情况下响应onmousedown事件），不是指本身无法响应单击事件，而是其内部的标签无法响应。举个简单的例子吧，一个div标签，里面有个a标签，a标签有个链接指向或有个js响应事件，而这个div标签有个png透明背景的图片，且在IE6下经过透明处理，那么这个a标签就是聋子的耳朵——摆设，只能看不能用。

2.图片大小控制受到限制
这个问题在css png透明滤镜和老式的JavaScript方法中会遇到。问题简述如下：一个img标签的src路径指向的是个含透明背景或半透明的png图片（例如：<img src=”xx.png” />），并且在IE6下，此图片受css滤镜或老式的JavaScript png透明处理，那么对该图片进行的任何大小限制拉伸都是瞎子点灯——白费蜡。再具体点说吧，假设我们这里的xx.png原始大小128像素*128像素，您使用css，img{width:256px; height:256px;}或是直接<img src=”xx.png” alt=”" width=”256″ height=”256″ />再或者是用上style<img style=”width: 256px; height: 256px;” src=”xx.png” alt=”" />要将他拉伸到256像素*256像素，您会发现有条比蜀道更难走的路——这张图片还是以其原始的大小显示，只是占据的空间变了。

3.无法对背景图片进行background-position定位
css sprite背景定位技巧在web2.0中可谓呼风唤雨，如鱼得水，但是遇到IE6浏览器，有时候他也只能哭了。如果背景图片是个含有透明背景的png图片，同时应用了IE6下背景透明显示处理的话，则该背景图片对background-position完全免疫。随便上面那个demo实例页面，保存下来，给这些background-image为png的图片再添加个background-position试试（比如background-position:-100px -100px;）您会发现不管用。

三、问题响应的解决方法

1.无法响应单击事件
要解决内部标签无法响应单击事件的问题，关键要把内部标签拿到外部，使用其他方法进行覆盖定位；或是不拿出来，使用另外的一个透明层或是透明图片进行定位与覆盖。最关键了一个词：覆盖；最难点：定位。说到覆盖性质的定位，无非两类，一是相对或绝对定位，二是margin负值定位。由于IE6下，父标签是position:relative;或是position:absolute属性时，里面的绝对定位层有时候会莫名消失，所以偏好于margin负值定位以及position:relative的负值定位。

2.图片大小控制受到限制
这个问题的解决，说出来您不要笑我，就是去使用强大的jQuery png透明插件吧。这个插件不仅可以让指定的png透明，还支持image类型的input的png图片背景透明，更加重要的是其支持png图片的任意拉伸。

3.无法对背景图片进行background-position定位
无法对背景图片进行background-position定位，那就拿到页面上进行定位就好了。使用img标签，src链接此背景大图，或是用span标签，其高宽就是整个大背景图的高宽，背景图片就是大背景图，在页面上对img或span这类标签进行定位，即可实现您想通过background-position实现的效果。
两大方法，margin定位与position定位。

这里需要分情况叙述。
首先，如果您直接使用的是css 滤镜或是传统的png透明JavaScript的话，这里的定位就是纯粹的margin定位或是absolute定位。这里概念说得比较含糊，实例说明吧。例如，我们将使用下面这张png按钮图片作为实例素材进行说明。

a.如果您使用的是css png透明滤镜，则需要将此png图片写在背景里，否则滤镜不起作用。写法如下：

<img src=”http://www.zhangxinxu.com/study/image/pixel.gif” width=”640″ height=”80″ style=”background-image:url(http://image.zhangxinxu.com/image/blog/200908/png_btn.png);” />

（说明：这里的background-image要写在css里面，这里是为了方便说明才用style表示的）然后您所要做的就是对这个img标签进行margin定位或absolute定位。

例如，我这样写，

<div style=”width:160px; height:40px; overflow:hidden;”>

	<img src=”http://www.zhangxinxu.com/study/image/pixel.gif” width=”640″ height=”80″ style=”background-image:url(http://image.zhangxinxu.com/image/blog/200908/png_btn.png); margin:-40px 0 0;” />

</div>

所显示的结果就是“首页”这个按钮鼠标经过的状态。通过margin控制图片的位置，由于父标签高宽以设定且溢出隐藏，所以就可以通过对图片的定位实现类似于background-position控制的效果。absolute绝对定位与margin定位其实是一样的，都是定位，应用的css属性不同而已。

b.如果您使用的是传统的JavaScript使得png透明，那么写法可以自由些。

<img src=”http://image.zhangxinxu.com/image/blog/200908/png_btn.png” />

的写法也是可以的，其定位与上面是一样的，直接通过设定class用css控制即可，一般不会出现莫名的错误的。

c.如果您使用的是jQuery png透明插件，则问题似乎不那么简单的。原版的jQuery png透明插件使用页面上定位解决background-position不起作用的问题是由局限性的。例如出现overflow:hidden失效的问题，img标签不受控制的问题，无法使用绝对定位的问题。我对其插件代码简单分析了下，找到上述问题的原因，并对原来的JavaScript代码做了些修改，使其支持页面上的类似background-position的定位效果。所以建议您下载修改后的png插件js。
另外，这里img标签失效是由于此插件处理透明的原理是，将原来的img标签隐藏，用一个span标签获取img标签的相关样式属性，将src链接的png图片以background-image的形式表示，并应用png透明滤镜。也就是说，代码执行的结果是将img标签换成span标签。所以如果您通过img标签控制图片的位置大小或是其他什么属性都是徒劳的。解决方法是用id或class进行控制，您给img标签赋一个class，例如”png_pos”，则插件执行后，这个class会转移到span标签上，所以对”png_pos”这个class设置的样式不会丢失，依旧在页面上表现出来，而且不会出现兼容性的问题。
下面这张图显示的就是页面定位后的效果图，支持hover事件，鼠标经过导航按钮按钮背景变化的效果，乍看去像是background-position定位的效果，实际上是在页面上使用margin定位的效果。

四、相关延伸的问题

1.png8与png24的透明显示
说了这么多IE6不支持png背景透明指的是png24格式保存的含有透明背景的图片，而以png8格式存储的png图片的全透明背景是支持的。一个支持而另外一个不支持的原因在于：png24的透明背景是Alpha透明背景，而png8格式的全透明背景是索引透明背景与gif的透明背景是同一个类型。

如下显示：

我曾经遇到过png图片的半透明层直接被css png透明滤镜当作完全透明层处理掉的情况。但是今天我反复尝试都没有出现这个情况，我想可能当时的png图片是用fireworks制作，保存的时候将图层分层信息也保存进去了。既然，没有再次出现这样的问题，自己也不宜多说，妄下定论。

所说IE6支持png8的背景透明，但是最终的图片效果跟gif的其实差别不太，都存在一个同样的问题，锯齿。就像上面这张图，所说png8格式的图片长得貌似还不错，水灵水灵的。只要是正好是个白色背景，而png默认也是白色锯齿的，一重合，正好就看上去不错了。可以要是是个深色背景，那就是白骨精遇见孙悟空——原形毕露啊。

有关锯齿的问题，我会单独写篇文章，这里先简单说个处理方法，例如上面的图片，背景色为#666666灰色时，png白色锯齿显露，解决方法是在photoshop保存图片的时候，将杂边的颜色设为跟背景色一致就行了，例如这里杂边颜色就设为#666666，
然后保存即可。

2. IE7的alpha半透明滤镜与png背景透明
IE7 alpha半透明滤镜会影响其png24 Alpha透明通道的正常显示。下图为demo实例页面效果截图：

图中可以看到本应透明显示的部分现在确是黑色的一团，怎一个“丑”字了得。

如果您有IE7浏览器，建议您将这个地址http://www.zhangxinxu.com/study/200908/ie7-filter-opacity-png.html放在IE7浏览器下看看，会有更加直观的体验与认识。

五、小结

IE6注定要退出历史舞台，但是目前国内的状况来看，比如网吧，都是IE6浏览器；我的一些刚接触电脑不久的亲戚也都是使用的IE6浏览器。IE8的出现蚕食的只是IE7的比重，对IE6对没有什么大的影响，所以这个退出的时间还真不好说，至少目前一段时间还是很有比重的，因此IE6下的些问题不得不拿出来说说，png透明的问题是非常典型的一个问题。这里我也只是将自己碰到的问题整理总结了一下，有些地方可能说得比较含糊，有些地方可能有遗漏，还有些则是不想展开的太多，乱了主线。不管怎样，算是博客的第一篇技术类的文章吧，断断续续也写了还几天，希望这些糟糕的文字和略显业余的实例页面能对大家有帮助。至少在写的过程中我是学到了不少的。共同进步吧！

文章整理自： http://www.zhangxinxu.com/wordpress/?p=14

来源：https://www.cnblogs.com/andybruse/archive/2012/09/25/2701966.html

标签

png

png素材

javascript

background