职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 324|回复: 2

CSS技巧之二PNG Fix

[复制链接]
郁闷小男人 发表于 2011-7-10 09:20 | 显示全部楼层 |阅读模式
本帖最后由 GameSir 于 2011-7-10 09:25 编辑

大家都知道IE6对于CSS设计者来说,简直就是一坨屎,抱歉用这个词,但是我还真找不到其他更合适的词来形容它,当然仅限于CSS解析方面。

IE6有个大Bug就是不支持PNG图片的透明色,这就大大限制了页面的设计。目前网上有很多解决IE6下PNG透明色的方案,从使用IE特有的滤镜或是e-xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-image.

下面给大家介绍两个支持bacbackgrond-image的js插件。

Unit PNG Fix

原理

Unit PNG Fix工作原理是利用一个透明的gif图片来解决。

使用方法

首先加入js文件

  Html代码  
<!--[if lt IE 7]>  
<script type="text/javascript" src="unitpngfix.js"></script>  
< ![endif]-->  

<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
< ![endif]-->  

把clear.gif文件拷贝到你的目录中,并在unitpngfix.js指定clear.gif的地址。


缺点


对于背景图片支持的不是很好,而且要添加另外的gif图片。


原理

DD_belatedPNG 工作原理是利用VML技术来实现透明色。

使用方法

首先加入js文件
Html代码  
<!--[if lt IE 7]>  
<script type="text/javascript" src="DD_belatedPNG.js"></script>  
<script type="text/javascript">  
DD_belatedPNG.fix('#id, .classname');   
</script>  
< ![endif]-->   

<!--[if lt IE 7]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#id, .classname');
</script>
< ![endif]-->   

引入DD_belatedPNG.js,然后给输入的css class 应用解决方案。

缺点

需要一个一个的添加css类,比较麻烦,当然你可以输入DD_belatedPNG.fix('img,a,div,span, li') 这种大的css标签。





hxy 发表于 2011-7-10 09:20 | 显示全部楼层
不知道你在说什么。

 楼主| 郁闷小男人 发表于 2011-7-17 10:05 | 显示全部楼层
刚才游戏去了 ~~嘿嘿~~
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-29 20:56 , Processed in 0.148173 second(s), 23 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表