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 相关文章推荐
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 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如何实现只替换一次或N次
2015/10/29 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
python进行两个表格对比的方法
2018/06/27 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python文件读写常见用法总结
2019/02/22 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
狼和鹿教学反思
2014/02/05 职场文书
药店主任岗位责任制
2014/02/10 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis