IE6 PNG透明终极解决方案

1 - 滤镜解决方案：

介绍：滤镜从IE4.0被微软正式引入，所以我们可以使用滤镜解决IE6的PNG透明问题，滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意：此方法在部分版本的IETest中无效，建议使用标准的IE6来进行测试！

思路：
      1、书写正常的CSS代码，通过background导入图片，这样所有的浏览器均使用了此PNG图片；
            background:url(../images/W3CfunsLogo.png);

      2、通过滤镜对引入图片，滤镜引入图片的时候是相对于HTML文件，而不是相对于CSS文件，语法如下：
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");

　　 3、所以我们得出的结论就是当我们使用filter的时候，就要使background失效，因此我们可以使用csshack来解决此问题，只需要将IE6的background:none;即可，那么可以得出的代码如下：
           _background:none; /*此代码只有IE6识别*/

         又因为filter只在IE6下让其产生作用，IE6+版本的浏览器虽然也识别filter，但是png透明是没有灰底问题的，所以我们同样将filter也加上IE6 Hack即可。

      4、最终我们可以得到如下代码：
            #pics
            {
                  background:url(../images/W3CfunsLogo.png) no-repeat;

                    /*以下为IE6设置PNG透明代码*/
                  _background:none;
                  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");
            }

      提示：如果需要使其支持链接的hover，那么需要在CSS中定义：cursor:pointer;使其呈现手型，否则将为默认的鼠标状态。

　　优点：
      1、绿色无插件；
      2、效率高，速度快；
      3、网速慢的时候，不会出现先灰底再透明的情况，支持远程图片；
      4、支持Hover等伪类，但是得使用两张图片，网速慢的情况下，会导致第二张图片暂时无法显示，因为还没有完全载入；

缺点：
      1、不支持平铺，虽然filter有sizingMethod="scale", 拉伸缩放模式，但是图片会变形，如果单纯的颜色或简单的渐变色还能横向平铺；
      2、不支持Img标签；
      3、不支持CSS Sprite；

使用情况：
      1、当没有img引入png时可考虑；
      2、当没有CSS Sprite需求时可考虑；
      3、当没有平铺需求时候可考虑；

2 - EvPng解决方案：

介绍：此方案与第七种方案差不多，使用方法也如出一辙，效果也非常不错。

思路：
1、首先下载此方案所用到的文件， EvPng.zip (3.39 KB, 下载次数: 2063)
2、参考第七种方案的使用方法。

优点：
      1、CSS代码无需任何修改，按照平时的思路来写即可；
      2、无需配置；
      3、没有多余的gif图片；
      4、支持img；
      5、支持平铺；
      6、支持CSS Sprite；
      8、支持Hover等伪类；

缺点：
      1、额外加入了js文件（文件4.93k，比DD_belatedPNG的6.39k还小）和http请求，可以忽略不计；
      2、当文件载入之前，会先暂时呈现灰底；
      3、js文件过多的时候，可能会报错，导致js无法正常运行（这种情况极少出现，可以忽略不计）；
      4、使用CSS Sprite技术的hover效果在部分情况下top可能会有1像素的偏差。

使用情况：
      1、当前7种方法均不能解决问题的时候可考虑；
      2、当DD_belatedPNG效果不理想的时候可以考虑；

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5         <title>IE6 PNG透明解决方案合集 - EvPng解决方案 - by W3Cfuns.com</title>
 6         <meta name="keywords" content="IE6,png,透明,解决方案,前端开发,前端开发网,W3Cfuns" />
 7        
 8         <meta name="application-name" content="前端开发网(W3Cfuns.com)"/>
 9         <meta name="msapplication-tooltip" content="前端开发网(W3Cfuns.com)"/>
10         <meta name="author" content="KwooShung"/>
11         <link rel="stylesheet" type="text/css" href="../style/common.css">
12         <link rel="stylesheet" type="text/css" href="style/png.css">
13         <!--[if IE 6]>
14         <script type="text/javascript" src="js/EvPng.js"></script>
15         <script language="javascript" type="text/javascript">
16         EvPNG.fix("#pngImg,#pics,#picsRepeat,#links,#link:hover");
17         </script>
18         <![endif]-->
19     </head>
20     
21     <body>
22         <!--PNG内容开始-->
23         <h2 class="font24 bold">IE6 PNG透明解决方案合集 - EvPng解决方案:</h2>
24         <div id="content">
25             <strong>目录说明：</strong>
26             <div class="menu">
27                 <img alt="IE6 PNG 透明 目录说明" src="images/menu.png"/>
28             </div>
29             <strong>CSS代码：（没什么特别之处，和平时写CSS一样）</strong>
30             <div class="code">
31                 <img alt="IE6 PNG 透明 代码说明" src="images/code.png"/>
32             </div>
33             <strong>div背景图片：</strong>
34             <div class="demoPlate">
35                 <div id="pics" class="pictures"></div>
36             </div>
37             <strong>div平铺效果：</strong>
38             <div class="demoPlate">
39                 <div id="picsRepeat" class="pictures"></div>
40             </div>
41             <strong>img标签：</strong>
42             <div class="demoPlate">
43                 <img id="pngImg" alt="IE6 PNG 透明 背景图片" src="images/W3CfunsLogo.png"/>
44             </div>
45             <strong>a伪类hover背景图片且使用CSS Sprite：</strong>
46             <div class="demoPlate">
47                 <a id="links" href="http://www.W3Cfuns.com/"></a>
48             </div>
49         </div>
50         <!--PNG内容结束-->
51         <a id="backButton" href="http://www.W3Cfuns.com/">Powered by W3Cfuns.com</a>
52         <p id="copyRight" class="font14 bold redDark">本文版权归<a href="http://www.w3cfuns.com/" target="_blank">W3Cfuns.com</a></p>
53     </body>
54 </html>

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,{}));

View Code