近期做的几个页面都用到了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"}]);