彻底解决IE6下PNG透明问题（多浏览器兼容png）
绝对解决IE6PNG透明问题，网络上小样儿的骗人招数太多了。本人花了几小时终于从种种骗人的“招数”中选择了以下两种方法。
已经经过反复调试，彻底解决IE6下PNG透明问题,其中方法一是加js的，方法二可加js可不加。去掉<script></script>的调用并不影响背景调用png。
方法一：
<!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透明方法一之JS法-逸维视觉</title>
<style type=”text/css”>
.a{background: #FFFF99 ; background-image: url(bg.jpg); height:800px;padding: 50px; }
.b{ float: left; background: url(tra.png) no-repeat 0 0; width:240px; height:307px; margin-right:20px;}
</style>
<!–背景图片透明方法–>
<script src=”iepng.js” type=”text/javascript”></script>
<!–插入图片透明方法–>
<script type=”text/javascript”>
EvPNG.fix(‘div, ul, img, li, input’); //EvPNG.fix(‘包含透明PNG图片的标签’); 多个标签之间用英文逗号隔开。
</script>
</head>
<body>
<div class=”a”>
<div class=”b”></div><!–背景调用–>
<img src=”tra.png” width=”240″ height=”307″ alt=”” /><!–页面插入图片–>
</div>
</body>
</html>
<!–
* Email: master@chhua.com
–>
JS源码iepng.js内容如下：
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?”:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return’\\w+’};c=1};while(c–)if(k[c])p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,’g’),k[c]);return p}(‘2 E={J:\’E\’,Z:{},1E:7(){4(x.1l&&!x.1l[6.J]){x.1l.23(6.J,\’24:25-26-27:3\’)}4(1F.11){1F.11(\’28\’,7(){E=29})}},1G:7(){2 a=x.1m(\’8\’);x.1H.1b.1n(a,x.1H.1b.1b);2 b=a.1o;b.1c(6.J+\’\\\\:*\’,\'{12:2a(#1I#2b)}\’);b.1c(6.J+\’\\\\:9\’,\’Q:1p;\’);b.1c(\’1J.\’+6.J+\’1K\’,\’12:y; 1q:y; Q:1p; z-2c:-1; 1d:-1r; 1L:1M;\’);6.1o=b},1N:7(){2 a=13.2d;4(13.1e.K(\’2e\’)!=-1||13.1e.K(\’1q\’)!=-1){E.1f(a)}4(13.1e==\’8.1s\’){2 b=(a.F.1s==\’y\’)?\’y\’:\’2f\’;G(2 v M a.3){a.3[v].9.8.1s=b}}4(13.1e.K(\’14\’)!=-1){E.1t(a)}},1t:7(a){4(a.F.14.K(\’2g\’)!=-1){2 b=a.F.14;b=1u(b.2h(b.1v(\’=\’)+1,b.1v(\’)\’)),10)/2i;a.3.N.9.8.14=a.F.14;a.3.C.I.2j=b}},15:7(a){2k(7(){E.1f(a)},1)},2l:7(a){2 b=a.1O(\’,\’);G(2 i=0;i<b.2m;i++){6.1o.1c(b[i],\’12:2n(E.1P(6))\’)}},1f:7(a){a.S.1Q=\’\’;6.1R(a);6.16(a);6.1t(a);4(a.O){6.1S(a)}},1T:7(b){2 c=6;2 d={2o:\’16\’,2p:\’16\’};4(b.17==\’A\’){2 e={2q:\’15\’,2r:\’15\’,2s:\’15\’,2t:\’15\’};G(2 a M e){d[a]=e[a]}}G(2 h M d){b.11(\’1w\’+h,7(){c[d[h]](b)})}b.11(\’2u\’,6.1N)},1x:7(a){a.8.2v=1;4(a.F.Q==\’2w\’){a.8.Q=\’2x\’}},1S:7(a){2 b={\’2y\’:P,\’2z\’:P,\’2A\’:P};G(2 s M b){a.3.N.9.8[s]=a.F[s]}},1R:7(a){4(!a.F){1g}U{2 b=a.F}G(2 v M a.3){a.3[v].9.8.1U=b.1U}a.S.18=\’\’;a.S.19=\’\’;2 c=(b.18==\’1V\’);2 d=P;4(b.19!=\’y\’||a.O){4(!a.O){a.D=b.19;a.D=a.D.2B(5,a.D.1v(\'”)\’)-5)}U{a.D=a.1h}2 e=6;4(!e.Z[a.D]){2 f=x.1m(\’1J\’);e.Z[a.D]=f;f.2C=e.J+\’1K\’;f.S.1Q=\’12:y; Q:1p; 1y:-1r; 1d:-1r; 1q:y;\’;f.11(\’2D\’,7(){6.1i=6.2E;6.1j=6.2F;e.16(a)});f.1h=a.D;f.1W(\’1i\’);f.1W(\’1j\’);x.1X.1n(f,x.1X.1b)}a.3.C.I.1h=a.D;d=V}a.3.C.I.1w=!d;a.3.C.I.N=\’y\’;a.3.N.9.8.18=b.18;a.S.19=\’y\’;a.S.18=\’1V\’},16:7(e){2 f=e.F;2 g={\’W\’:e.2G+1,\’H\’:e.2H+1,\’w\’:6.Z[e.D].1i,\’h\’:6.Z[e.D].1j,\’L\’:e.2I,\’T\’:e.2J,\’1k\’:e.2K,\’1z\’:e.2L};2 i=(g.L+g.1k==1)?1:0;2 j=7(a,l,t,w,h,o){a.2M=w+\’,\’+h;a.2N=o+\’,\’+o;a.2O=\’2P,1Y\’+w+\’,1Y\’+w+\’,\’+h+\’2Q,\’+h+\’ 2R\’;a.8.1i=w+\’u\’;a.8.1j=h+\’u\’;a.8.1y=l+\’u\’;a.8.1d=t+\’u\’};j(e.3.N.9,(g.L+(e.O?0:g.1k)),(g.T+(e.O?0:g.1z)),(g.W-1),(g.H-1),0);j(e.3.C.9,(g.L+g.1k),(g.T+g.1z),(g.W),(g.H),1);2 k={\’X\’:0,\’Y\’:0};2 m=7(a,b){2 c=P;2S(b){1a\’1y\’:1a\’1d\’:k[a]=0;1A;1a\’2T\’:k[a]=.5;1A;1a\’2U\’:1a\’2V\’:k[a]=1;1A;1I:4(b.K(\’%\’)!=-1){k[a]=1u(b)*.2W}U{c=V}}2 d=(a==\’X\’);k[a]=2X.2Y(c?((g[d?\’W\’:\’H\’]*k[a])-(g[d?\’w\’:\’h\’]*k[a])):1u(b));4(k[a]==0){k[a]++}};G(2 b M k){m(b,f[\’2Z\’+b])}e.3.C.I.Q=(k.X/g.W)+\’,\’+(k.Y/g.H);2 n=f.30;2 p={\’T\’:1,\’R\’:g.W+i,\’B\’:g.H,\’L\’:1+i};2 q={\’X\’:{\’1B\’:\’L\’,\’1C\’:\’R\’,\’d\’:\’W\’},\’Y\’:{\’1B\’:\’T\’,\’1C\’:\’B\’,\’d\’:\’H\’}};4(n!=\’1D\’){2 c={\’T\’:(k.Y),\’R\’:(k.X+g.w),\’B\’:(k.Y+g.h),\’L\’:(k.X)};4(n.K(\’1D-\’)!=-1){2 v=n.1O(\’1D-\’)[1].31();c[q[v].1B]=1;c[q[v].1C]=g[q[v].d]}4(c.B>g.H){c.B=g.H}e.3.C.9.8.1Z=\’20(\’+c.T+\’u \’+(c.R+i)+\’u \’+c.B+\’u \’+(c.L+i)+\’u)\’}U{e.3.C.9.8.1Z=\’20(\’+p.T+\’u \’+p.R+\’u \’+p.B+\’u \’+p.L+\’u)\’}},1P:7(a){a.8.12=\’y\’;4(a.17==\’32\’||a.17==\’33\’||a.17==\’34\’){1g}a.O=V;4(a.17==\’35\’){4(a.1h.21().K(/\\.22$/)!=-1){a.O=P;a.8.1L=\’1M\’}U{1g}}U 4(a.F.19.21().K(\’.22\’)==-1){1g}2 b=E;a.3={N:{},C:{}};2 c={9:{},I:{}};G(2 r M a.3){G(2 e M c){2 d=b.J+\’:\’+e;a.3[r][e]=x.1m(d)}a.3[r].9.36=V;a.3[r].9.37(a.3[r].I);a.38.1n(a.3[r].9,a)}a.3.C.9.39=\’y\’;a.3.C.I.3a=\’3b\’;a.3.N.I.1w=V;b.1T(a);b.1x(a);b.1x(a.3c);b.1f(a)}};3d{x.3e(“3f”,V,P)}3g(r){}E.1E();E.1G();’,62,203,’||var|vml|if||this|function|style|shape|||||||||||||||||||||px|||document|none||||image|vmlBg|EvPNG|currentStyle|for||fill|ns|search||in|color|isImg|true|position||runtimeStyle||else|false||||imgSize||attachEvent|behavior|event|filter|handlePseudoHover|vmlOffsets|nodeName|backgroundColor|backgroundImage|case|firstChild|addRule|top|propertyName|applyVML|return|src|width|height|bLW|namespaces|createElement|insertBefore|styleSheet|absolute|border|10000px|display|vmlOpacity|parseInt|lastIndexOf|on|giveLayout|left|bTW|break|b1|b2|repeat|createVmlNameSpace|window|createVmlStyleSheet|documentElement|default|img|_sizeFinder|visibility|hidden|readPropertyChange|split|fixPng|cssText|vmlFill|copyImageBorders|attachHandlers|zIndex|transparent|removeAttribute|body|0l|clip|rect|toLowerCase|png|add|urn|schemas|microsoft|com|onbeforeunload|null|url|VML|index|srcElement|background|block|lpha|substring|100|opacity|setTimeout|fix|length|expression|resize|move|mouseleave|mouseenter|focus|blur|onpropertychange|zoom|static|relative|borderStyle|borderWidth|borderColor|substr|className|onload|offsetWidth|offsetHeight|clientWidth|clientHeight|offsetLeft|offsetTop|clientLeft|clientTop|coordsize|coordorigin|path|m0|l0|xe|switch|center|right|bottom|01|Math|ceil|backgroundPosition|backgroundRepeat|toUpperCase|BODY|TD|TR|IMG|stroked|appendChild|parentNode|fillcolor|type|tile|offsetParent|try|execCommand|BackgroundImageCache|catch’.split(‘|’),0,{}))
方法二：
<!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>
<!–背景图片透明方法–>
<style type=”text/css”>
.a{background: #FFFF99; background-image: url(bg.jpg); height:800px;padding: 50px; }
.b{ float: left; width:240px; height:307px; margin-right:20px;
background-image: url(tra.png) no-repeat 0 0!important;/* FF IE7 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’top-left-logo.png’); /* IE6 */
_ background-image: none; /* IE6 */}
</style>
<!–插入图片透明方法–>
</head>
<body>
<div class=”a”>
<div class=”b”>bbbb</div><!–背景调用–>
<img src=”tra.png” width=”240″ height=”307″ alt=””/>xx<!–页面插入图片–>
</div>
</body>
</html>
<!–
* Email: master@chhua.com
–>
自由转载，转载请注明： 转载自WEB开发笔记 www.chhua.com
本文链接地址: 彻底解决IE6下PNG透明问题（多浏览器兼容png） http://www.chhua.com/web-note109
评论