上篇 下篇

使用DD_belatedPNG让IE6支持PNG透明图片

2010年07月02日 ⁄ Web前端 ⁄ 评论数 17 ⁄ 被围观 4,815+

众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上，具有其它图形格式所达不到的效果，IE6这一致命缺陷极大地限制了Web设计的创意发挥。虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是e­xpression,再到javascript+透明 GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat属性。而使用DD_belatedPNG.js可完美的解决IE6下PNG图片透明问题，并且支持backgrond-position与background-repeat. 这是其他方法所不具备的，同时DD_belatedPNG还支持a:hover属性,以及<img>。我制作的热点新闻主题，就加入了DD_belatedPNG处理导航PNG透明图片,使其在不同浏览器下保持相同的外观。

使用方法：

首先下载JS文件

0.0.8a.js (未压缩版本)
0.0.8a-min.js (压缩版)

英文说明

之后在页面中引用代码：

<!–[if IE 6]>
<script type=”text/javascript” src=”下载下来的JS路径”></script>
<script>
DD_belatedPNG.fix(‘CSS选择器, 应用类型’);
</script>
<![endif]–>

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用PNG的CSS选择器（可使用ID选择器和类选择器）和应用类型（分为img和background两种）。

如DD_belatedPNG.fix(‘#box-one, img’) 或者 DD_belatedPNG.fix(‘.header, background’) 等。

这些可以简写成 DD_belatedPNG.fix(‘#box-one, .header, img,background’);  。

更多选择器的如 DD_belatedPNG.fix(‘#box-one, .header,#footer,.box-two a:hover, img,background’);  等等。

另外，为解决IE6下背景图闪烁，可以在页面中添加如下脚本

<!–[if IE 6]>
<script type=”text/javascript”>
// <![CDATA[
if((window.navigator.appName.toUpperCase().indexOf("MICROSOFT")>=0)&&(document.execCommand))
try{
document.execCommand("BackgroundImageCache", false, true);
}
catch(e){}
// ]]>
</script>
<![endif]–>

返回

作者: 知更鸟

该日志由 知更鸟 于582 天前发表在Web前端分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
转载请注明: 使用DD_belatedPNG让IE6支持PNG透明图片 | 知更鸟 +复制链接
关键字: DD_belatedPNG, Web前端

您可能还会对这些文章感兴趣！

1. 15个效果非常炫的jQuery插件
2. 几个jQuery滚动到顶部（Scroll to top）解决方案
3. 60款jQuery 幻灯片
4. 经典JavaScript正则表达式实战
5. php正则表达式的特殊字符含义
6. 10个jQuery Lightbox （暗箱）脚本
7. 关于jQuery fadeIn() & fadeOut()在IE中的问题
8. 什么是HTML5?

目前有 17 条留言 其中：访客:13 条, 博主:2 条 引用: 2

1. underone : 2010年07月02日 582 天前 17:53:52  1楼 @回复 回复

   回头工作中试试看
2. 美女 身材 : 2010年07月02日 582 天前 20:14:39  2楼 @回复 回复

   折腾，真是爱折腾
3. icesaturn : 2010年10月04日 488 天前 23:48:13  3楼 @回复 回复

   已经发现这种代码会与部分幻灯插件产生不兼容的情况，而且好像也不能说是完美。一句话，IE6老矣啊
4. Don : 2010年10月15日 477 天前 21:15:29  4楼 @回复 回复

   这个很好，记录之。。。IE6在国外还是很占市场的！
   • 知更鸟 : 2010年10月16日 476 天前 00:40:02 @回复 回复

     你确定IE6在国外还是很占市场的！不是国内？
5. insomnia : 2010年12月10日 421 天前 10:15:01  5楼 @回复 回复

   这个是不是不支持position属性啊？我试验了一下，好像是不支持这个属性啊。求解答
   • 知更鸟 : 2010年12月10日 421 天前 10:39:26 @回复 回复

     支持，我用的主题多处使用
6. wasiuk : 2011年03月02日 339 天前 17:31:42  6楼 @回复 回复

   但是在XP Sp3下IE6是不支持的……
   • wasiuk : 2011年03月02日 339 天前 17:32:57 @回复 回复

     写错了，应该是IE6.0的Sp3版本不支持。
7. missjuan : 2011年05月18日 262 天前 11:39:52  7楼 @回复 回复

   DD_belatedPNG 好像就支持IETexter下面的IE6，不支持绿色版的IE6
   • 老衲 : 2011年08月29日 159 天前 17:37:42 @回复 回复

     支持 我用的就是绿色版的IE6
8. 老衲 : 2011年08月29日 159 天前 17:37:24  8楼 @回复 回复

   问鸟哥个问题 这样透明解决了 我的图大，用img的height来变小，但是属性表现不出来，怎么解决啊，不知道懂我意思不...
   另忘了说 我透明方法用的是DD_belatedPNG
9. 维多 : 2011年10月10日 117 天前 14:22:15  9楼 @回复 回复

   感谢。。。问题解决了。
10. 张鹏 : 2011年10月10日 117 天前 14:33:45  10楼 @回复 回复

    你好，我是新手，用你们的模板修改不好 你们可以提供帮助吗？要是可以了联系QQ357717717
11. DRIVER : 2011年12月14日 52 天前 12:47:26  11楼 @回复 回复

    下载链接失效