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 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 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 常用函数库和一些实用小技巧
2009/01/01 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
js实现有时间限制消失的图片方法
2015/02/27 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
基于vue实现分页效果
2017/11/06 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
公共机构节能宣传周活动总结
2014/07/09 职场文书
工作能力自我评价2015
2015/03/05 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
竞聘书的秘诀
2019/04/02 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python