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调用C#代码
Jan 17 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
DIV始终居中的js代码
Feb 17 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 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制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php实现简单四则运算器
2020/11/29 PHP
Git命令之分支详解
2021/03/02 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Android分包MultiDex策略详解
2017/10/30 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
python3的pip路径在哪
2020/06/23 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
扬尘污染防治方案
2014/06/15 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Python实现生成bmp图像的方法
2021/06/13 Python
浅谈Python数学建模之数据导入
2021/06/23 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Oracle 触发器trigger使用案例
2022/02/24 Oracle