IE6下实现png图片半透明的常用方法

Bell — Fri, 13 Nov 2009 09:57:21 +0000

IE6是个”神奇”的浏览器,其原因想必做前端的同行们都深有体会,:)作为我个人而言,最反感的就是IE6不支持除A以外的hover伪类,再一个就是它不支持png图片的alpha透明度.当然此类问题已有众多的解决方案,这里只是总结下自己常用的IE6下实现png半透明的方法以及适用环境.

1.使用滤镜,适用于单一png背景图片的快速部署;弊端:消耗资源比较多,方法比较繁琐.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie6下png透明-iinterest</title> <style type="text/css"> *{margin:0; padding:0;} .box{ width:958px; height:512px; background:url(http://image215.poco.cn/mypoco/myphoto/20091114/16/51737245200911141635177073974043057_000.jpg) no-repeat; } .png-bg{width:341px; height:258px; margin:60px auto 0; background:url(http://www.iinterest.net/wp-content/uploads/2009/11/windows.png) no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.iinterest.net/wp-content/uploads/2009/11/windows.png'); _background-image:none; } </style> </head> <body> <div class="box"> <div class="png-bg"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

2.使用JS(pngfix.js),适用于插入png图片的部署;弊端:pngfix.js会影响到CSS的布局,如demo中img设置了margin,但在浏览时却无效,而且资源消耗较大.

提示：你可以先修改部分代码再运行。

dome中iepng.js下载

3.使用JS(iepng.js),背景图片和插入图片通杀,并可自定义需要png透明效果的容器,适用于复杂的布局环境;弊端:还是资源消耗问题…

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie6下png透明-iinterest</title> <style type="text/css"> *{margin:0; padding:0;} .box{ width:958px; height:512px; background:url(http://image215.poco.cn/mypoco/myphoto/20091114/16/51737245200911141635177073974043057_000.jpg) no-repeat;} img{ margin:-20px 0 0 10px; } .png-bg{width:341px; height:258px; margin:10px auto 0; background:url(http://www.iinterest.net/wp-content/uploads/2009/11/windows.png) no-repeat; text-align:center; line-height:258px;} </style> <script src="http://www.iinterest.net/demo/js/iepng.js" type="text/javascript"></script> <script type="text/javascript"> GtPNG.fix('div, ul, img, li, input'); //GtPNG.fix 自定义包含透明PNG图片的标签,多个标签之间用英文逗号隔开。 </script> </head> <body> <div class="box"> <div class="png-bg">png-bg</div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

demo中iepng.js下载

IInterest » png透明

IE6下实现png图片半透明的常用方法