IE6下的PNG图片半透明问题解决（a:hover）

源文件及文档地址压缩包下载

复制这张图片地址下载然后更改后缀名为ZIP即可

不怕大家笑话，今天一下午竟鼓捣IE6下半透明图片的问题了。

简单方法是有，用滤镜，但我在Firefox下不能正常浏览，况且又耗资源，还不是WEB标准所提倡的，所以，弃之。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1.png', sizingMethod='crop');

之后开始网上搜资料，试了3，4个，不是把自己页面撑破了的（可能自己哪些地方写的不好），就是鼠标划过效果的png图片不能透明，反正是疲了点儿。

最后，找到个适合我的。贴出来给需要的人分享下，相当的简单...

小说明下：这里是设置你所需要透明图片容器的名字，包括 a:hover （别写错了 :D）

< script type ="text/javascript" >
DD_belatedPNG.fix( ' .png_img, .img_box a:hover ' );
</ script >

还有一个js文件（DD_belatedPNG.js） 打包下载 或 115  或 oeo.la

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();

html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > ie6 png 半透明 </ title >
<!-- [if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>

<script type="text/javascript">
DD_belatedPNG.fix('.png_img, .img_box a:hover');
</script>
<![endif] -->

< style type ="text/css" >
body {
background-color : #000 ;
}
.img_box {
width : 500px ;
height : 300px ;
position : relative ;
}
.img_box a {
display : block ;
height : 150px ;
width : 150px ;
color : #F33 ;
}
.img_box a:hover {
background : url(images/2.png) left top no-repeat ;
}
</ style >
</ head >

< body >
< img class ="png_img" src ="images/1.png" alt ="" />
< div class ="img_box" > < a href ="#" > 超链接透明 a:hover </ a > </ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/ahjesus/archive/2011/07/27/2118044.html