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 键盘keyCode键码值表
Dec 24 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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
JS实现php的伪分页
2008/05/25 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
vuex存储token示例
2019/11/11 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Python语法快速入门指南
2015/10/12 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
Java面向对象面试题
2016/12/26 面试题
服务标语口号
2014/07/01 职场文书
合作意向书
2014/07/30 职场文书
2016高考冲刺决心书
2015/09/23 职场文书