首页 > 代码库 > IE6支持PNG24图片背景透明

IE6支持PNG24图片背景透明

网上关于IE6支持PNG24图片背景透明的方法有数种,以下只列出其中两种个人认为比较实用的方法。

第一种:使用IE自身滤镜
background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.mamicode.com/a.png" ,sizingMethod="crop");

原理:其他浏览器调用PNG,IE6则先设背景没有(必须),然后调用滤镜使之显示PNG图片。


第二种:DD_belatedPNG(绝佳方案)

       网上解决IE6png透明的方法有很多种,但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与 background-repeat。DD_belatedPNG支持backgrond-position与background-repeat,同时还支持a:hover属性,以及<img>。


原理:这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.


使用方法:

      1.下载DD_belatedPNG.js文件。

      2.在网页中引用,如下:
      <!--[if IE 6]>
            <script src="http://www.mamicode.com/DD_belatedPNG.js" mce_src="http://www.mamicode.com/DD_belatedPNG.js"></script>
            <script type="text/javascript">

                  DD_belatedPNG.fix(‘.png_bg‘);    /* 将 .png_bg 改成你应用了透明PNG的CSS选择器*/

            </script>

      <![endif]-->  

      一种便捷的写法:DD_belatedPNG.fix(‘div, ul, img, li, input , a‘);

      3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名。

      使用a:hover请留意:想要用透明PNG作为a:hover的背景图片时,那么你需要留意你的代码,需要以" a:hover"来作为选择器. 否则可能会导致无法成功。例如:DD_belatedPNG.fix(‘.box a:hover‘);另外,如果使用DD_belatedPNG.fix(‘div, ul, img, li, input , a‘);简洁写法的话,如果a链接和hover都使用了png背景图的话,没什么问题,如果a链接本身没有背景图,而hover中使用背景图,会导致透明无效,解决方法:给a添加空背景。例子:

hover有效:

    a { background: url(images/a.png); }
    a:hover { background: url(images/b.png); }

hover无效:

    a { }
    a:hover { background: url(images/b.png); }

解决方法:

    a { background: url(images/.png); }
    a:hover { background: url(images/b.png); }


      PNGDemo下载


推荐使用第二种,接近完美,使用方便,并且无用代码少,IE6淘汰后直接删除js文件和引用即可。

IE6支持PNG24图片背景透明