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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
搭建vue开发环境
Jul 19 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
详解node child_process模块学习笔记
2018/01/24 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Django--权限Permissions的例子
2019/08/28 Python
pymysql模块的操作实例
2019/12/17 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
七年级英语教学反思
2014/01/15 职场文书
事务机电主管工作职责
2014/02/25 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
转让协议书
2015/01/27 职场文书
mysql函数全面总结
2021/11/11 MySQL