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 相关文章推荐
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
微信小程序如何使用云开发
May 17 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 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 和 COM
2006/10/09 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
TensorFlow损失函数专题详解
2018/04/26 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
大学生如何写自荐信
2014/01/08 职场文书
班级旅游计划书
2014/05/03 职场文书
旷课检讨书500字
2014/10/14 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
节约用水广告语60条
2019/11/14 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript