首页 > 代码库 > 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图片背景透明