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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
vue中轮训器的使用
Jan 27 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
详解Python中DOM方法的动态性
2015/04/11 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python装饰器与递归算法详解
2016/02/18 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
HTTP状态码详解
2021/03/18 杂记
德国网上宠物店:Zoobio
2018/05/23 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
介绍一下linux的文件系统
2015/10/06 面试题
汉语专业应届生求职信
2013/10/01 职场文书
迎新生标语大全
2014/10/06 职场文书
党校学习党性分析材料
2014/12/19 职场文书
怎样写离婚协议书
2015/01/26 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
病人慰问信范文
2015/02/15 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL