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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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
使用 MySQL Date/Time 类型
2008/03/26 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python pymongo模块用法示例
2018/03/31 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
django中静态文件配置static的方法
2018/05/20 Python
Python----数据预处理代码实例
2019/03/20 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
网络营销策划方案
2014/06/04 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
奖学金个人总结
2015/03/04 职场文书
2016新年感言
2015/08/03 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis