【技术】IE6下png背景不透明问题<重要提示：存在bug，没能彻底解决>

重要提示：存在bug，没能彻底解决IE6下png背景不透明问题，好比：用jquery实现去阴影 jquery的版本用1.4.4的能够，用1.7.2的js报错；微软发布了一个新的补丁，是针对VML的，打了以后再使用DD_belatedPNG.js，PNG背景就会变成空的；... ...能够用css sprite和png透明写，详见http://www.enkj.com/help/newscontent/4379或本博客园20140326《IE6下png图片背景透明的方法》，能够同时支持css sprite和png透明的。

 

IE6如下浏览器这里不考虑。

 

前言：IE6不支持png背景透明或半透明。其解决方法有IE滤镜，纯粹的JavaScript，以及 jQuery等，正所谓事非通过不知难，让png图片在IE6下背景透明显示只是第一步，若是对这些png图片作进一步的操做，每每会出现各种莫名的问 题。而本篇文章讲详尽阐述png背景透明会出现哪些问题，一些本身的经验之谈和一些相关的拓展。内容较多，有必定的深度和广度，但愿对你们有帮助。

 

目录：
1、可解决的方法
1. css滤镜
2. 老JavaScript方法
3. jQuery实现
4. flash实现

 

2、产生的问题
1. 响应单击事件
2. 图片大小控制
3. 背景图片的定位

 

3、相应的解决方法
1. 响应单击事件
2. 图片大小控制
3. 背景图片的定位

 

4、相关延伸的问题
1. png8与png24的半透明显示
2. IE7的半透明滤镜与png背景透明

 

5、小结

 

1、可解决的方法

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’);}
非IE6浏览器使用正常的background定位，IE6去除背景图片，应用png透明滤镜。

若是您的浏览器或内核为IE6，建议进入demo实例页面http://www.zhangxinxu.com/study/200908/filter-ie6-png-transparent.html

 

2.传统的JavaScript
使用传统的JavaScript方法，页面只要连接一个小巧的JavaScript文件就能够。例如，您能够在页面上添加以下代码：

 

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

（注：下为http://www.zhangxinxu.com/study/js/png.js内容：）

 

if (!window.XMLHttpRequest) {
	window.attachEvent("onload", enableAlphaImages);
}

function enableAlphaImages(){
	for (var i=0; i<document.all.length; i++){
			var obj = document.all[i];
			var bg = obj.currentStyle.backgroundImage;
			var img = document.images[i];
			if (bg && bg.match(/\.png/i) != null) {
				var img = bg.substring(5,bg.length-2);
				var offset = obj.style["background-position"];
				obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
				obj.style.background = "none";
		} else if (img && img.src.match(/\.png$/i) != null) {
			var src = img.src;
			img.style.width = img.width + "px";
			img.style.height = img.height + "px";
			img.style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
			img.src = "http://s1.95171.cn/b/img/pixel.gif";
		}
	}
}

 

 

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

 

若是您是IE6或内核是IE6的浏览器，建议进入demo实例页面http://www.zhangxinxu.com/study/200908/js-ie6-png-transparent.html
在这个页面，您能够清晰的看出此JavaScript的应用范围以及局限性。

3.jQuery png背景透明插件
相对于前面的方法，jQuery的IE6下png透明插件相对要强大些。
此插件js下载：jquery.pngFix.pack.js
使用的时候还要连接jQuery文件。
此js的强大之处在于不只支持IE6下img标签的png背景透明，background-image的背景透明，还支持image类型的input的png背景透明那个，并且实现的精确控制，即您可让页面上任意一张png图片背景透明而其余不受影响。

无论您是什么浏览器，建议进入精彩的demo实例页面http://www.zhangxinxu.com/study/200908/jQuery-ie6-png-transparent.html
您能够在这个页面上感觉到此png 背景透明插件的强大。

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

若是您感兴趣，建议进入demo实例页面http://www.zhangxinxu.com/study/200908/flash-ie6-png-transparent.html
页面上显示了flash获取页面参数的ActionScript代码，ActionScript 3.0代码，须要至少flash cs3版本的flash软件，直接写在第一帧上就能够了，另外设置舞台大小与图片同样大。

2、产生的问题

1.没法响应单击事件
这个问题在各个解决方法中都是存在的（即便是flash封装png的方法，其自己也不能响应click事件，只能背景透明状况下响应 onmousedown事件），不是指自己没法响应单击事件，而是其内部的标签没法响应。举个简单的例子吧，一个div标签，里面有个a标签，a标签有个 连接指向或有个js响应事件，而这个div标签有个png透明背景的图片，且在IE6下通过透明处理，那么这个a标签就是聋子的耳朵——摆设，只能看不能 用。多说不宜，眼见为实，若是您的浏览器是IE6或内核为IE6请进入http://www.zhangxinxu.com/study/200908/js-ie6-png-click-nouse.html，去感觉下我所说的单击不响应是怎么个不响应法吧。若是您如今使用的是Firefox，chrome或是opera，Safari，可是您有该死的IE6浏览器，建议您委曲求全，也进来看看。

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像素，您会发现有条比蜀道更难走的路——这张图片仍是以其原始的大小显示，只是占据的空间变了。

上图为demo实例页面的小小截图，若是您是IE6浏览器，能够进入http://www.zhangxinxu.com/study/200908/js-ie6-png-size-nouse.html去看个清楚看个究竟。

3.没法对背景图片进行background-position定位
有个名词叫作css sprite。貌似是说不少背景图片集中到一张大图上，经过background-position定位，用到哪张图片就显示那部分区域，这好处大大的 多，使用流行的很啊，优化大小，减少服务器压力，好处不少，里面很有学问，但不是本文重点，不偏题。这个css sprite背景定位技巧在web2.0中可谓呼风唤雨，如鱼得水，可是遇到IE6浏览器，有时候他也只能哭了。若是背景图片是个含有透明背景的png图 片，同时应用了IE6下背景透明显示处理的话，则该背景图片对background-position彻底免疫。随便上面那个demo实例页面，保存下 来，给这些background-image为png的图片再添加个background-position试试（好比background- position:-100px -100px;）您会发现无论用。若是您不想麻烦，直接进入http://www.zhangxinxu.com/study/200908/jQuery-ie6-png-bg-pos-nouse.html去看看吧。ps：要是IE6浏览器，否则没有效果的哦！

3、问题响应的解决方法

1.没法响应单击事件
要解决内部标签没法响应单击事件的问题，关键要把内部标签拿到外部，使用其余方法进行覆盖定位；或是不拿出来，使用另外的一个透明层或是透明图片进行定位 与覆盖。最关键了一个词：覆盖；最难点：定位。说到覆盖性质的定位，无非两类，一是相对或绝对定位，二是margin负值定位。因为IE6下，父标签是 position:relative;或是position:absolute属性时，里面的绝对定位层有时候会莫名消失，因此本身偏好于margin负 值定位以及position:relative的负值定位。在此问题的demo实例页面最后一栏给了一个解决方法，margin负值定位解决的。方法很 多，也很自由，就是覆盖，定位。您有兴趣能够试试进入http://www.zhangxinxu.com/study/200908/js-ie6-png-click-nouse.html去看看如何进行定位，若是解决此单击不响应问题的。

2.图片大小控制受到限制
这个问题的解决，说出来您不要笑我，就是去使用强大的jQuery png透明插件吧。这个插件不只可让指定的png透明，还支持image类型的input的png图片背景透明，更加剧要的是其支持png图片的任意拉伸。
若是您是IE6浏览器，建议进入http://www.zhangxinxu.com/study/200908/jQuery-ie6-png-size-normal.html去看看图片美妙的拉伸控制，若是您目前使用的不是IE6浏览器，可是有，也建议您去看看。

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定位的效果。

针对jQuery插件下png大图在页面上定位的问题，我特意写了一个演示页面，详见博客园20140326名为ie6-png-background-position.zip的压缩文件。若是您手头上的就是IE6浏览器或您有IE6或以IE6为内核的浏览器，建议进入http://www.zhangxinxu.com/study/200908/png-img-html-position.html，里面有完整的代码示例说明，相信可能会对上面我不逃清楚的措辞有进一步的了解。

4、相关延伸的问题

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

以下显示：

若是您使用的正是IE6浏览器，进入demo实例页面http://www.zhangxinxu.com/study/200908/png8-img-png24-show.html

我曾经遇到过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浏览器下看看，会有更加直观的体验与认识。