IE6 PNG透明最终解决方案【转】【精】

2013-12-20

IE6 PNG透明终极解决方案【转】【精】? ?? ???7、由于此js只有使用IE6时才有用，所以为了让我们的页面更加高效的

IE6 PNG透明终极解决方案【转】【精】

? ?? ???7、由于此js只有使用IE6时才有用，所以为了让我们的页面更加高效的执行，我们可以将上方代码修改如下，只有IE6的时候才调用执行此JavaScript：
? ?? ???

优点：
? ?? ???1、一次性配置好，只需要像平时一样引入png图片，也不需要考虑png相对于html路径的问题，当目录有所变化，只需要修改htc文件或css中htc文件路径即可。
? ?? ???2、支持平铺属性。
? ?? ???3、不支持Img标签；
? ?? ???4、不支持Hover等伪类；

缺点：
? ?? ???1、多引入了js、图片和htc，共三个文件；
? ?? ???2、不支持CSS Sprite；
? ?? ???3、当文件载入之前，会先暂时呈现灰底；

使用情况：
? ?? ???1、当没有img引入png时可考虑；
? ?? ???2、当没有CSS Sprite需求时可考虑；
? ?? ???3、PNG图片比较频繁修改时可考虑；

htc解决方案 - DEMO入口

? ?? ?? ?? ???}

优点：
? ?? ???CSS代码看起来似乎很优雅，至少没有乱七八糟的文件了，基本没有外加的文件，效率还算不错。

缺点：
? ?? ???1、多引入了一个本不应该存在的blank.gif图片文件；
? ?? ???2、不支持背景图即Background；
? ?? ???3、当文件载入之前，会先暂时呈现灰底；
? ?? ???4、不支持Hover等伪类；

使用情况：
? ?? ???1、大部分透明的png存在于img标签中时可考虑；
? ?? ???2、如果有背景图的可以参考上面所说的支持背景图的两种方式；

纯css解决方案 - DEMO入口

优点：
? ?? ???代码看起来似乎很优雅，基本没有外加的文件，效率还算不错。

缺点：
? ?? ???1、额外加入了js文件，增加http请求；
? ?? ???2、不支持背景图即Background；
? ?? ???3、当文件载入之前，会先暂时呈现灰底；
? ?? ???4、不支持Hover等伪类；

使用情况：
? ?? ???1、大部分透明的png存在于img标签中时可考虑；
? ?? ???2、如果有背景图的可以参考上面所说的支持背景图的两种方式；

原生JavaScript解决方案 - DEMO入口

优点：
? ?? ???1、CSS代码看起来很优雅，只需要引入js进行简单的配置一下就行了，效率还算不错；
? ?? ???2、支持背景图，支持img；

缺点：
? ?? ???1、额外加入了js文件和图片文件，增加http请求；
? ?? ???2、加载了一个庞大的jQuery类库；
? ?? ???3、多库共存的时候可能会出现问题；
? ?? ???4、不支持平铺；
? ?? ???5、不支持CSS Sprite；
? ?? ???6、当文件载入之前，会先暂时呈现灰底；
? ?? ???7、不支持Hover等伪类；

使用情况：
? ?? ???当您的项目中使用jQuery的时可以考虑；

jQuery解决方案 - DEMO入口

? ?? ???3、调用函数，设置参数如下：
? ?? ?? ?? ???DD_belatedPNG.fix("#pngImg,#pics,#picsRepeat");

? ?? ?? ?? ???其中传入的参数为所使用png图片的标签的ID、类样式和标签名称，同样也可以按照下方这样来写
? ?? ?? ?? ???DD_belatedPNG.fix("#content img");
? ?? ?? ?? ???此方法则表示#content下的所有img标签透明

? ?? ?? ?? ???如果为链接和链接的hover设置透明，那么您按照下方这么来写，在部分版本里面可以不用加入:hover直接写选择器即可，但是为了保险，建议咱们还是加上:hover：
? ?? ?? ?? ???DD_belatedPNG.fix("#links,#link:hover");

? ?? ?? ?? ???写到这里并且您使用过jQuery或者CSSQuery类库，那么您一定熟悉上面的这种选择方法，总之就是，在CSS中您是如何选择的元素，那么在这个js函数（方法）中传入什么，只不过多个选择的时候，使用逗号隔开即可。

? ?? ???KwooShung用此方法时的小技巧：如果页面中存在很多png，DD_belatedPNG.fix();函数的参数岂不是很长？我们可以使用这种写法：
? ?? ?? ?? ?(3.39 KB, 下载次数: 2173)?
? ?? ???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效果不理想的时候可以考虑；

方案提供者：本帖60楼，感谢moxuanyuan童鞋的分享。

EvPng解决方案 - DEMO入口

热点排行

Web前端

IE6 PNG透明最终解决方案【转】【精】