notice

致江湖上的朋友:
  欢迎您访问╃苍狼山庄╃请使用侧边栏的搜索功能查找日志,希望能在这里找到您所需要的东西,使您在平淡之中充满喜悦。

Clang 出品,必属精品! 我的地盘我做主! 活着,真累!
本站域名:Http://ClangCN.Com/(点击加入收藏夹)
欢迎您再来,谢谢!!!
Clang 于2006年01月09日

IE6下解决PNG图片透明的方法

2010年8月23日 | 分类: 未分类 | 标签:

虽然IE8已经出了很久了,并且传出IE9也已经快出来了,但是依然有许多的网民在使用IE6,这是不争的事实。本来只是一张png透明图片,在IE下是很好解决的,我也尝试了很多种,包括js法,滤镜css法等等,感觉总体来说都不是很完美,而且如果同时使用Sprites方法,就不是那么简单容易的事情了。

最终发现了使用htc方法嵌到css文件中基本可以一次性解决大部分的透明问题。

可解决办法:
1、页面中使用《img》标签加入的png透明图像
2、css中使用background加入的png透明背景(支持多种版本)
3、某些版本的background的png透明,需要在当前页添加一个js解决
下载文件包: http://www.twinhelix.com/css/iepngfix/iepngfix.zip

1、下载后,解压出来,会有很多文件,其中我们需要用到的有3个文件:
iepngfix.htc,blank.gif,iepngfix_tilebg.js

2、你可以把他们分别传到相应的css,js和images目录中,当然,也可以建立新的文件夹,比如名为:iepng的文件夹,把他们传到其中

3、添加第一句代码,这是在html文件中添加的格式,不要忘记修改htc文件的路径,如果怕出错,直接使用相对根目录的路径,比如/iepng/iepngfix.htc,这样一般不会出错,当然你也可以把behavior: url(iepngfix.htc)这句添加到你的reset.css文件中去

1
2
3
<style type=text/css”>
img, div { behavior: url(iepngfix.htc); }
</style>

4、使用记事本,或类似的工具打开iepngfix.htc文件,将其中blankImg的文件路径替换成你自己的,比如/iepng/blank.gif,根据自己的实际情况。

1
IEPNGFix.blankImg = ‘/images/blank.gif’;

5、将下面这句js调用代码加到需要页面的《head》中去(此步不是必须的,如果你的head部分的include统一调用的,推荐一定加上这句)

1
<script type="text/javascript" src="iepngfix_tilebg.js"></script>

经过以上步骤,基本可以实现IE6下png的透明效果了。

DEMO:http://www.twinhelix.com/css/iepngfix/demo/

-------------------------End-------------------------

本文的评论功能被关闭了.