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 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
七个很有意思的PHP函数
May 12 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
JavaScript的一些小技巧分享
Jan 06 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
React中的refs的使用教程
2018/02/13 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
少先队入队活动方案
2014/02/08 职场文书
三查三看党性分析材料
2014/02/18 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
应届生自荐信
2014/06/30 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
管理失职检讨书范文
2015/05/05 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
nginx+lua单机上万并发的实现
2021/05/31 Servers