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 相关文章推荐
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
微信小程序整个页面的自动适应布局的实现
Jul 12 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
JS实现放烟花效果
2020/03/10 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
python使用tkinter实现简单计算器
2018/01/30 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
python实现flappy bird小游戏
2018/12/24 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
Python中six模块基础用法
2019/12/08 Python
实习生个人找工作的自我评价
2013/10/30 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
地球上的星星观后感
2015/06/02 职场文书
千与千寻观后感
2015/06/04 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
python析构函数用法及注意事项
2021/06/22 Python
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
MySQL索引失效场景及解决方案
2022/07/23 MySQL