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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
vue之延时刷新实例
Nov 14 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 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 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
基于python实现学生管理系统
2018/10/17 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
职业规划书如何设计?
2014/01/09 职场文书
同事打架检讨书
2014/02/04 职场文书
银行办公室岗位职责
2014/03/10 职场文书
企业催款函范本
2015/06/24 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python