<!-- http://www.iefans.net/ie8-filteralpha-png-touming/ 

IE8里可以這樣寫(xiě)　-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=50)”;

IE7里可以這樣寫(xiě)　filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

IE6,IE7,IE8里都可以這樣寫(xiě)　filter:alpha(opacity=50)

-->

from:http://unc0pyrightable.blog.163.com/blog/static/1313300602010021526561/

今天推薦一個(gè)最完美讓ie6支持png透明的js,為什么說(shuō)它最完美呢？

只因?yàn)樗?strong>支持background-position和background-repeat

這是市面上的其它方法比不上的

首先,要在網(wǎng)頁(yè)中引用js

<!--[if IE 6]>
<script src="http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

上面那個(gè)js路徑是絕對(duì)路徑,大家最好還是把它下下來(lái),以防網(wǎng)站掛了.

引用之后就是更改第二個(gè)<script>里的.png為你要實(shí)現(xiàn)效果的選擇器.

就比如,你#header引用了一個(gè)background,那你上面就要改為:

DD_belatedPNG.fix('#header');

并且它還支持組選擇器,如:

DD_belatedPNG.fix('#header,h1,h2,h3,#content');

很簡(jiǎn)單吧,只要把有透明png的標(biāo)簽或選擇器寫(xiě)在里面就行

至于這里面能不能支持css3就不得而知了.

官網(wǎng):http://www.dillerdesign.com/experiment/DD_belatedPNG/

這個(gè)JS內(nèi)容（DD_belatedPNG_0.0.8a-min.js），備存：

/**
* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.
* Author: Drew Diller
* Email: drew.diller@gmail.com
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
* Version: 0.0.8a
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license
*
* Example usage:
* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector
* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
**/
var DD_belatedPNG={
ns:"DD_belatedPNG",imgSize:{
},delay:10,nodesFixed:0,createVmlNameSpace:function () {
   if(document.namespaces&&!document.namespaces[this.ns]) {
    document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")
   }
},createVmlStyleSheet:function () {
   var b,a;
   b=document.createElement("style");
   b.setAttribute("media","screen");
   document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);
   if(b.styleSheet) {
    b=b.styleSheet;
    b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");
    b.addRule(this.ns+"\\:shape","position:absolute;");
    b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");
    this.screenStyleSheet=b;
    a=document.createElement("style");
    a.setAttribute("media","print");
    document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);
    a=a.styleSheet;
    a.addRule(this.ns+"\\:*","{display: none !important;}");
    a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")
   }
},readPropertyChange:function () {
   var b,c,a;
   b=event.srcElement;
   if(!b.vmlInitiated) {
    return
   }if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1) {
    DD_belatedPNG.applyVML(b)
   }if(event.propertyName=="style.display") {
    c=(b.currentStyle.display=="none")?"none":"block";
    for(a in b.vml) {
     if(b.vml.hasOwnProperty (a)) {
      b.vml[a].shape.style.display=c
     }
    }
   }if(event.propertyName.search("filter")!=-1) {
    DD_belatedPNG.vmlOpacity(b)
   }
},vmlOpacity:function (b) {
   if(b.currentStyle.filter.search("lpha")!=-1) {
    var a=b.currentStyle.filter;
    a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;
    b.vml.color.shape.style.filter=b.currentStyle.filter;
    b.vml.image.fill.opacity=a
   }
},handlePseudoHover:function (a) {
   setTimeout(function () {
    DD_belatedPNG.applyVML(a)
   },1)
},fix:function (a) {
   if(this.screenStyleSheet) {
    var c,b;
    c=a.split(",");
    for(b=0;b<c.length;b++) {
     this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")
    }
   }
},applyVML:function (a) {
   a.runtimeStyle.cssText="";
   this.vmlFill(a);
   this.vmlOffsets(a);
   this.vmlOpacity(a);
   if(a.isImg) {
    this.copyImageBorders(a)
   }
},attachHandlers:function (i) {
   var d,c,g,e,b,f;
   d=this;
   c={
    resize:"vmlOffsets",move:"vmlOffsets"
   };
   if(i.nodeName=="A") {
    e={
     mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"
    };
    for(b in e) {
     if(e.hasOwnProperty (b)) {
      c[b]=e[b]
     }
    }
   }for(f in c) {
    if(c.hasOwnProperty (f)) {
     g=function () {
      d[c[f]](i)
     };
     i.attachEvent("on"+f,g)
    }
   }i.attachEvent("onpropertychange",this.readPropertyChange)
},giveLayout:function (a) {
   a.style.zoom=1;
   if(a.currentStyle.position=="static") {
    a.style.position="relative"
   }
},copyImageBorders:function (b) {
   var c,a;
   c={
    borderStyle:true,borderWidth:true,borderColor:true
   };
   for(a in c) {
    if(c.hasOwnProperty (a)) {
     b.vml.color.shape.style[a]=b.currentStyle[a]
    }
   }
},vmlFill:function (e) {
   if(!e.currentStyle) {
    return
   }else {
    var d,f,g,b,a,c;
    d=e.currentStyle
   }for(b in e.vml) {
    if(e.vml.hasOwnProperty (b)) {
     e.vml[b].shape.style.zIndex=d.zIndex
    }
   }e.runtimeStyle.backgroundColor="";
   e.runtimeStyle.backgroundImage="";
   f=true;
   if(d.backgroundImage!="none"||e.isImg) {
    if(!e.isImg) {
     e.vmlBg=d.backgroundImage;
     e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)
    }else {
     e.vmlBg=e.src
    }g=this;
    if(!g.imgSize[e.vmlBg]) {
     a=document.createElement("img");
     g.imgSize[e.vmlBg]=a;
     a.className=g.ns+"_sizeFinder";
     a.runtimeStyle.cssText="behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";
     c=function () {
      this.width=this.offsetWidth;
      this.height=this.offsetHeight;
      g.vmlOffsets(e)
     };
     a.attachEvent("onload",c);
     a.src=e.vmlBg;
     a.removeAttribute("width");
     a.removeAttribute("height");
     document.body.insertBefore(a,document.body.firstChild)
    }e.vml.image.fill.src=e.vmlBg;
    f=false
   }e.vml.image.fill.on=!f;
   e.vml.image.fill.color="none";
   e.vml.color.shape.style.backgroundColor=d.backgroundColor;
   e.runtimeStyle.backgroundImage="none";
   e.runtimeStyle.backgroundColor="transparent"
},vmlOffsets:function (d) {
   var h,n,a,e,g,m,f,l,j,i,k;
   h=d.currentStyle;
   n={
    W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop
   };
   a=(n.L+n.bLW==1)?1:0;
   e=function (b,p,q,c,s,u) {
    b.coordsize=c+","+s;
    b.coordorigin=u+","+u;
    b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";
    b.style.width=c+"px";
    b.style.height=s+"px";
    b.style.left=p+"px";
    b.style.top=q+"px"
   };
   e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);
   e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);
   g={
    X:0,Y:0
   };
   if(d.isImg) {
    g.X=parseInt(h.paddingLeft,10)+1;
    g.Y=parseInt(h.paddingTop,10)+1
   }else {
    for(j in g) {
     if(g.hasOwnProperty (j)) {
      this.figurePercentage(g,n,j,h["backgroundPosition"+j])
     }
    }
   }d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);
   m=h.backgroundRepeat;
   f={
    T:1,R:n.W+a,B:n.H,L:1+a
   };
   l={
    X:{
     b1:"L",b2:"R",d:"W"
    },Y:{
     b1:"T",b2:"B",d:"H"
    }
   };
   if(m!="repeat"||d.isImg) {
    i={
     T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)
    };
    if(m.search("repeat-")!=-1) {
     k=m.split("repeat-")[1].toUpperCase();
     i[l[k].b1]=1;
     i[l[k].b2]=n[l[k].d]
    }if(i.B>n.H) {
     i.B=n.H
    }d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"
   }else {
    d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"
   }
},figurePercentage:function (d,c,f,a) {
   var b,e;
   e=true;
   b=(f=="X");
   switch(a) {
    case "left":case "top":d[f]=0;
    break;
    case "center":d[f]=0.5;
    break;
    case "right":case "bottom":d[f]=1;
    break;
    default:if(a.search("%")!=-1) {
     d[f]=parseInt(a,10)/100
    }else {
     e=false
    }
   }d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));
   if(d[f]%2===0) {
    d[f]++
   }return d[f]
},fixPng:function (c) {
   c.style.behavior="none";
   var g,b,f,a,d;
   if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR") {
    return
   }c.isImg=false;
   if(c.nodeName=="IMG") {
    if(c.src.toLowerCase().search(/\.png$/)!=-1) {
     c.isImg=true;
     c.style.visibility="hidden"
    }else {
     return
    }
   }else {
    if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1) {
     return
    }
   }g=DD_belatedPNG;
   c.vml={
    color:{
    },image:{
    }
   };
   b={
    shape:{
    },fill:{
    }
   };
   for(a in c.vml) {
    if(c.vml.hasOwnProperty (a)) {
     for(d in b) {
      if(b.hasOwnProperty (d)) {
       f=g.ns+":"+d;
       c.vml[a][d]=document.createElement(f)
      }
     }c.vml[a].shape.stroked=false;
     c.vml[a].shape.appendChild(c.vml[a].fill);
     c.parentNode.insertBefore(c.vml[a].shape,c)
    }
   }c.vml.image.shape.fillcolor="none";
   c.vml.image.fill.type="tile";
   c.vml.color.fill.on=false;
   g.attachHandlers(c);
   g.giveLayout(c);
   g.giveLayout(c.offsetParent);
   c.vmlInitiated=true;
   g.applyVML(c)
}
};
try{
document.execCommand("BackgroundImageCache",false,true)
}catch(r) {
}DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();

或者：

讓IE6支持PNG格式的圖片

用法：

先復(fù)制下面的代碼在記事本中，然后另存為pngbehavior.htc（名字可以任意）：

<public:componentlightWeight="true">
<public:attach event="onpropertychange"onevent="propertyChanged()" />
<public:attach event="onbeforeprint"onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint"onevent="afterPrint()" for="window"/>
<script>



var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent)&&
navigator.platform== "Win32";

var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;

if (supported) fixImage();

function propertyChanged() {
if (!supported || isPrinting) return;

var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};

function fixImage() {
// get src
var src = element.src;

// check for real change
if (src == realSrc&& /\.png$/i.test(src)) {
element.src =blankSrc;
return;
}

if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}

// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src =blankSrc;
// set filter
element.runtimeStyle.filter= "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='"+ src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter= "";
}
}

function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}

function afterPrint() {
isPrinting = false;
fixImage();
}

</script>
</public:component>


最后在你的css文件里面加上這么一段代碼：

img {
behavior: url("pngbehavior.htc");
}