WEB2.0 web20
当前位置:首页 > 网站建设专题 > WEB2.0
IE6.0下PNG透明最简洁解决方案
发布日期:2010-10-14 阅读次数:858 字体大小:

因为本身会一些网页制作技术,所以很久前就听说过半透明的PNG文件在IE6下会有显示的问题,但由于一直没有自己的网站,也从来没有真正遇到过。

今年初开始做自己的网站。用了张带有透明部分的png图片做了网站LOGO,心想都什么年代了,不用考虑IE6了。某天下班回来打开Google Analytics后台,才发现IE6的访问量居然占去了总量的40%,吓了一跳,赶紧从网上下了绿色版的IE6测试自己的网站,果不其然,LOGO完全不透明。

于是连夜上网搜索解决方案,总体来说网上的办法普遍都比较复杂,包括css滤镜,js,gif替换等。但总觉得不够漂亮,终于经过一个晚上的查找,找到了一种只需要2句js代码便能顺利解决的方法。接下来和大家分享

首先,从我的网站下载iepng.js

http://www.***.com/templates/default/js/iepng.js

如果你的网站中使用半透明png作为背景的元素id为logo,则在<head></head>之间加入:

<!-- for ie6 png fix -->
<script type="text/javascript" src=http://www.chinaz.com/Design/Rules/"templates/js/iepng.js"></script>
<script type=text/javascript> EvPNG.fix('#logo');</script>

好啦!就这么简单,完美解决,截图看看前后效果比较:

最后再解释一下,如果你用透明png作为背景的div id为foo,那么就应该写为:

EvPNG.fix('#foo');

如果你用透明png作为背景的div class为bar,那么就应该写为:

EvPNG.fix('.bar");

和CSS的语法是一样的,OK,希望能和大家继续交流建站技巧。

本文由甜妞网(www.hers99.com)站长旺仔原创,转载请注明出处

感谢 旺仔 的投稿