PNG图片兼容方法

1、Unit PNG Fix

Unit PNG Fix同样是一个修复IE6无法显示透明图片的JS它的主要特点有:

  1. 非常小的JS文件,只有1KB
  2. 解决因为IE的滤镜属性所带来的影响
  3. 无论是img元素或background-image属性都能有很好的效果
  4. 在加载页面之前就能自动运行,不需要再为png图片定义任何类名
  5. 允许自动高宽
  6. 超级简单的应用方法

Unit PNG Fix怎么使用:

1).下载zip 然后,添加下面的代码到你页面的头部(一定要确保路径的正确)

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

2).添加clear.gif到你的images 文件夹中.在js文件中,修改“var clear=“images/clear.gif” 路径为存放clear.gif的文件路径.

一些注意事项:

Unit PNG Fix能够让background-repeat在ie6下工作,不过这种工作方式不是像正常的repeat图片重复的效果,而是采用了拉伸的效果。

官方网址及下载地址:http://unitinteractive.com/labs/unitpngfix.php

 

二、IE PNG Fix 2.0

IE PNG Fix 2.0是通过页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。

IE PNG Fix 2.0支持以图片方式插入透明png和以CSS背景方式插入透明png。

需要注意的是:

  1. images目录的blank.gif透明图片作为png图片的替换,如目录有变请修改iepngfix.htc里blank.gif代码路径
  2. iepngfix.htc为IE6所用,本例子以”_”hack作为区分
  3. 应用有PNG透明图片的标签,均要读取behavior:url(“iepngfix.htc”)
  4. iepngfix方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
  5. 透明png背景图片会以所在层的宽高度拉伸填充,border计算在层的宽高内

官方网址及下载地址:http://www.twinhelix.com/css/iepngfix/

转载于:https://www.cnblogs.com/oltra/p/5138922.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值