解决"ie6下png透明图片"的兼容问题

解决"ie6下png透明图片"的兼容问题:

PNG ( Portable Network Graphics ) 格式的无损压缩和半透明特性对增强网页效果减少网页体积有着重要的作用，虽然 IE7 IE8已经支持 PNG，但目前 IE6 还是有市场的，怎么样让 IE6 也使用 PNG 呢？

方法一：滤镜法（只能做背景图，用css的backgroud属性来设置）

IE5.5+ 的 AlphaImageLoader 滤镜为 PNG 提供良好的支持，虽然 IE5.0 无法支持，但毕竟是非常非常小的一部分，将来会更小，因此我们不考虑。

滤镜的语法：

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

属性：

enabled: 可选项，布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true: 默认值，滤镜激活。
false: 滤镜被禁止。
sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop: 剪切图片以适应对象尺寸。
image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale: 缩放图片以适应对象的尺寸边界。
src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

使用方法：

html>body #png{background:url(images/bg.png) no-repeat;} /* FF，Opera */ *html #png{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="images/bg.png");background:none;} /* IE5.5+～IE7+ */ eg: .Logo { filter:progid:DXImageTransform.Microsoft.AlphaImageLoade(src=images/Logo.png);width:200px;height:42px;}

Firefox，Opera 支持 PNG ，使用“>”子选择器识别，而IE不识别该选择器（包括IE7）。
虽然 IE7 IE8支持 PNG，但方便起见，还是采用滤镜，使用通配符“*”，该通配符只有 IE 才能识别。

方法二：JS(只能用<img src=""/>图片来设置)

在xml中加入img标签　调用以下JS就ok了：

IEpngfix.js：

function correctPNG() // correctly handle PNG transparency in Win IE 6.0. { for(var i=0; i<document.images.length; i++) { var img = document.images[i] 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 var imgAttribs = img.attributes; for (var j=0; j<imgAttribs.length; j++) { var imgAttrib = imgAttribs[j]; if (imgAttrib.nodeName == "align") { if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle break } } var strNewHTML = "<span " + imgID + imgClass + imgTitle strNewHTML += " style="/" mce_style="/""" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" strNewHTML += "(src=/'" + img.src + "/', sizingMethod='scale');/"></span>" img.outerHTML = strNewHTML i = i-1 } } } window.attachEvent("onload", correctPNG);

 

 

总结：不需要变动的图片，用滤镜背景法。需要变动，程序上传的，用JS。