ie6 png透明图片处理

近期做的几个页面都用到了png透明，同时需要兼容ie6，所以想总结下png透明图片的使用方法，以便将来使用。

png透明图片的使用途径有两个，一是背景图片，二是<img/>标签。下面讲讲这两种方法，如何进行处理。

语法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项true | false。设置或检索滤镜是否激活。true : 默认值。

sizingMethod : 可选项。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。选项如下：

image : 默认值。缩放容器适应图片尺寸。
crop : 剪切图片适应容器。
scale : 缩放图片适应容器尺寸。

一、背景图片的处理方法：

首先将滤镜加上：　　

1、background: url(tips.png) no-repeat top left;
2、filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="tips.png");

显示结果：

　　

滤镜失败！

失败原因：

　　在ie6下直接识别了第1行的背景图，将滤镜背景覆盖了。解决办法，使用ie6hack，将ie6下的正常背景置为none。

background: url(tips.png) no-repeat top left;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="tips.png");
_background-image:none;

结果：

　　

滤镜生效。

 

二、<img/>的处理方法：

思路：使用js脚本，将<img/>标签转换为一个<span>或者<div>等块或者行元素，将<img/>中的src的图片转换成块或者行元素的背景图。

优点：可以实现批量处理页面中的png透明图片。

写了一个jquery插件进行处理，代码如下：

jQuery.fn.extend({
　　handleIE6png: function(){
　　　　　　var args = arguments[0];
　　　　　　return this.each(function(){
　　　　　　　　　　if($.browser.version.indexOf("6.0") == -1 || $(this).attr("src").toLowerCase().indexOf(".png") == -1)return;
　　　　　　　　　　if(!document.body.filters) return;

　　　　　　　　　　var imgStr = "<div",
　　　　　　　　　　　　img = this,
　　　　　　　　　　　　styleFlag = false,
　　　　　　　　　　　　display="inline-block",
　　　　　　　　　　　　width = $(img).width(),
　　　　　　　　　　　　height = $(img).height();

　　　　　　　　　　for(var i=0; i<args.length; i++){

　　　　　　　　　　　　//自定义属性值
　　　　　　　　　　　　if( typeof(args[i]) == "object"){
　　　　　　　　　　　　　　if(args[i].display){
　　　　　　　　　　　　　　　　　display=args[i].display
　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　if(args[i].width){
　　　　　　　　　　　　　　　　width=args[i].width
　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　if(args[i].height){
　　　　　　　　　　　　　　　　height=args[i].height
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}else{

　　　　　　　　　　　　　　//保留的属性

　　　　　　　　　　　　　　if(args[i] == "title"){args[i] = "title";}

　　　　　　　　　　　　　　if(args[i] == "src")continue;
　　　　　　　　　　　　　　if(args[i] == "style"){
　　　　　　　　　　　　　　　　styleFlag = true;
　　　　　　　　　　　　　　　　continue;
　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　imgStr += $(img).attr(args[i])?(" " + args[i] + "='" + $(img).attr(args[i]) + "'"):"";
　　　　　　　　　　　　}
　　　　　　　　　　}

　　　　　　　　　　//add style

　　　　　　　　　　imgStr += " style='display:"+display+";background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\"" + img.src + "\", sizingMethod=\"scale\");";
　　　　　　　　　　imgStr += width?("width:"+width+"px;"):"";
　　　　　　　　　　imgStr += height?("height:"+height+"px;"):"";

　　　　　　　　　　if(!styleFlag){
　　　　　　　　　　　　imgStr += "'";
　　　　　　　　　　}else{
　　　　　　　　　　　　imgStr += img.style+";'";
　　　　　　　　　　}

　　　　　　　　　　imgStr += "></div>";
　　　　　　　　　　img.outerHTML = imgStr;

　　　　　　　　});
　　　　}
});

 调用方法：$(elems).handleIE6png(pro_array);

其中的elems为png透明图片对象（可以是一个或多个），pro_array为需要保留的图片对象的属性数组。

使用条件：图片的样式不要用图片tag标签定义，应该使用类或者id。 如div img{width:;height:;} 可以使用类或者id来代替如：.png{width:;height:;}

注意：该函数只能滤镜png透明图片，对正常的png图片使用，会滤掉图片。

例子：

<img class="img png" src="http://tips.png"/>
<img class="img png" src="http://reTips.png"/>
<img class="png" src="http://btn.png" style="position:absolute"/>

调用
$(".png").handleIE6png(["style","class"]);

　

该方法中，图片的dislay属性默认为“inline-block”，width和height属性默认为图片的width和height。这三个属性可进行修改，修改方法:在pro_array中用对象的方式传递。

例子：$(".png").handleIE6png(["src","class",{"width":"100"},{"height":"200"},{"display":"block"}]);