透明图片通过css的设置可以在网页中显示的更完美，但是在ie6中，透明背景却被显示了一个灰色的背景。这实在是一个令人非常不爽的bug，下面就分享一种方法彻底解决网页中透明图片显示灰色背景的尴尬问题吧。
这里主要用到了一个国外牛人写的 js 文件，名为 DD_belatedPNG.js（官方网站：http://www.dillerdesign.com/experiment/DD_belatedPNG/），可以直接去官网下载该文件。
该文件的下载地址：http://www.dillerdesign.com/experiment/DD_belatedPNG/#download
这个文件压缩后的代码如下：
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(;该文件下载之后，请在网页的 head 标签内引用该 js 文件。代码如下：
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('.sfjvip,.content a:hover';
</script>
<![endif]-->根据以上代码设置，当用户用IE 6 浏览器浏览我们的网页的时候。我们就将页面代码中所有 class="sfjvip" 的图片的背景设置为透明了（当然前提是该图片本身就是透明图片）。也将 class="content" 代码段里面的 a:hover 标签里面所用到的透明背景图片灰色背景给去除了。