处理IE6下PNG图片透明背景问题

由于历史原因，IE较早的版本不支持PNG透明

可以支持GIF等的透明

由于png图片相对较小，所以很多网站还是青睐于PNG图片

最近就遇到这种情况，使用js和css滤镜来实现的与大家分享一下下：

首先，判断浏览器和版本，如果是IE7一下版本，进行处理

再者，遍历所有<img>控件，如果为png格式的处理；

最后，img的onload加载图片，并用css滤镜处理图片

//ie6 编码图片
function ES_PNG(obj,rootPath){
 if( !( $.browser.msie && parseFloat( $.browser.version ) < 7 )){
  return ;
 }
 obj.each(function(){
  var imgSrc = $.trim( $(this).attr("src") );
  var suf = "";
  //取图片的后缀
  if( imgSrc.length > 0 &&  imgSrc.indexOf("?") == -1){
   suf = imgSrc.substring( imgSrc.lastIndexOf(".")+1 ).toUpperCase();
  }else if( imgSrc.length > 0 &&  imgSrc.indexOf("?") != -1){
   imgSrc = imgSrc.substring( 0 , imgSrc.indexOf("?") );
   suf = imgSrc.substring( imgSrc.lastIndexOf(".")+1 ).toUpperCase();
  }
  if( suf == "PNG"){
   var which = $(this).get(0);
     var src = which.src;
      // 添加随机数防止图片缓存
     var random = new Date().getTime()  ;
     if(src.indexOf("?") == -1){
    src +="?random="+random ;
   }else{
    src +="&random="+random ;
   }
     var img = new Image();
      img.onload = function(){
       var width = parseInt( which.style.width );
       var height = parseInt( which.style.height );
       if( isNaN(width) || isNaN( height)){
        which.style.width  = ( parseInt(this.width) )+"px";
        which.style.height  = ( parseInt(this.height) )+"px";
          }else{
           which.style.width  =   parseInt( width)  +"px";
        which.style.height  =  parseInt( height) +"px" ;
       };
       which.src =  rootPath+"ieseal.gif"  ;//--1个像素的透明gif
       //设置css滤镜
    which.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale')";
   };
      img.src = which.src;
  };
 });
}

在web中调用该方法：

//if6去掉png背景
 ES_PNG($("img"),"${basePath}/images/public/");

其中ES_PNG（）的两个参数：$("img")是所有的图片，${basePath}/images/是1像素透明gif图的位置