Skip to content

DD_belatedPNG,最佳IE6环境下实现PNG-24的应用方案

by 堂主 on 十月 6th, 2009

 

IE6环境下,它 — 支持PNG-24背景循环 | 支持定位 | 支持focus | 支持hover | 支持做背景加链接正常 | 支持正常应用zoom …

点击这里查看演示DEMO , 点击这里下载DEMO

兄弟们,热泪盈眶了没?仰天长啸了没?疯狂挠墙揪胸毛了没?

兴奋的点起一只白沙烟,怀着鄙夷的神色一脚踢开“AlphaImageLoader”,向“PNG Transparency in IE”、“IE PNG Fix”、“ie7/ie8-js”挥手告别。腾出四肢,飙泪拥抱DD_belatedPNG~!

详细文档见http://dillerdesign.com/experiment/DD_belatedPNG/。这里就不提供翻译了,哪位大大有时间有精力就来个翻译文档吧。08年末这东西刚出来的时候国内就有人发过这个方法,但不知道为什么,没引起什么“效应”,很多人还是在用上面说的“更具局限性”的方法。

使用方法很简单,首先下载调用JS

0.0.8a.js (未压缩版本, ~12Kb)
0.0.8a-min.js (压缩版, ~7Kb)

之后在使用PNG的页面中引用代码

<!–[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下背景图闪烁,可以在页面中添加如下脚本(此处感谢奶茶Along的指点!)

<!–[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]–>

OK,就介绍这么多,期待大家来分享更多的应用方法!

From → 未分类

10 Comments
  1. 感谢堂主分享,以收藏此方法,果然是最完美的方案了!可恶的ie6……

  2. 同样感谢敬爱的堂主,同样BS可恶的IE6,让我们将他推入万劫不复的深渊吧。

  3. tizza permalink

    在IE6非白色背景上可以应用效果如何?

  4. @tizza:徐老大,非白色背景也没问题的。您看我最上面那个演示的Demo,总体页面背景就是一个淡蓝色带阳光装线条的背景。其他部分都是在这个添加在这个背景之上的。

  5. unicac permalink

    cool….PNG背景透明自然不在话下了吧?

  6. @unicac:自然!见俺做的那个演示。

  7. 小皮 permalink

    好东西,正要用到,收藏了,多谢堂主分享阿

  8. CSS小罗 permalink

    谢谢博主分享,,,解决24位图片没有问题

  9. 郁闷了,不知道为啥,我用的这个透明小图标,有的小图标的位置竟然离奇的远处好多距离,图标的位置与图标显示的地方距离相差太大了

  10. 超越 permalink

    这个我测试了,成功了,但是为了一个透明效果就用JS,我始终觉得在开发体验上并不很好,当然,我不是说这个方法不好,很可能是我技术员的问题吧,在实际应用中会和其他JS产生冲突,比如:图片无缝循环滚动的时候,图片滚动不了(实际上不是滚动不了,当你按CTRL+A的时候就会发现,他实际上滚动的.)不过无缝滚动的时候,PNG是以IMG形式存在的,并不是背景,所以,这里我用了另外一个JS来实现,没有发现冲突.另外,如果页面背景是白色的,那还是直接用png8吧,在纯白色背景下,是看不出啥问题的,因为PNG8产生的杂边也是纯白.

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS