DD_belatedPNG,IE6下PNG透明解决方案(国外)


Posted in Javascript onDecember 06, 2010

我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.
然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.

而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.

看Demo

原理
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.

使用方法
1.在这里下载DD_belatedPNG.js文件.
2.在网页中引用,如下:

<!--[if lte IE 6]> 
<script src="Js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix('div, ul, img, li, input , a, .png_bg'); 
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器*/ 
</script> 
<![endif]-->

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.

使用a:hover请留意
5-25更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器.否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

<!--[if IE 6]> 
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix('.trans,.box a:hover'); 
</script> 
<![endif]-->

其他方案
在这里还是提供其他方案供大家参考.
  • Unit PNG Fix
  • ie7-js
  • IE PNG Fix
Javascript 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
实例详解Node.js 函数
Jun 10 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
vue中实现高德定位功能
Dec 03 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 #Javascript
jquery实现心算练习代码
Dec 06 #Javascript
初窥JQuery(二)事件机制(2)
Dec 06 #Javascript
2010年最佳jQuery插件整理
Dec 06 #Javascript
jquery提升性能最佳实践小结
Dec 06 #Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 #Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 #Javascript
You might like
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP积分兑换接口实例
2015/02/09 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
python 域名分析工具实现代码
2009/07/15 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
物流专员岗位职责
2014/02/17 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书