IE6支持PNG24图片背景透明

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

第一种：使用IE自身滤镜
background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="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="DD_belatedPNG.js" mce_src="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文件和引用即可。

转载于:https://www.cnblogs.com/k13web/p/4139295.html