IE6下实现PNG背景透明的方法小结

PNG图像格式介绍：

PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。

IE6下PNG背景透明的显示问题

PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明，会显示出灰色的背景

IE6中PNG背景透明图片显示如图：

正常显示如图：

IE6下PNG背景透明的解决办法

1、用hack方法使用GIF格式替代PNG（视觉要求允许的情况）

.pngImg { background:url(image.png); _background:url(image.gif);} 注意上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语法，只有IE6识别。因此，其他浏览器会调用PNG，而IE6刚调用GIF。

2、滤镜filter解决IE6下背景灰

background:url(a.png) repeat-x 0 ===0;

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png" ,sizingMethod="crop");

上面的原理是其他调用PNG，IE6,则先设背景没有，然后调用滤镜使之显示PNG图片。

缺陷：IE6下背景无法平铺，这个问题很严重。同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。

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

整个互联网上解决这个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属性,以及。

使用方法：

在页面中外部引用JS文件。

引用函数是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’)

JS文件见附件：/Uploads/file/20170503/20170503133515_30129.rar

在这里可以直接下载DD_belatedPNG.js文件：

http://dillerdesign.com/experiment/DD_belatedPNG/#download

优点：

1、CSS代码无需任何修改，按照平时的思路来写即可；

2、无需配置；

3、没有多余的gif图片；

4、支持img标签；

5、支持平铺；

6、支持CSS Sprite；

7、支持Hover等伪类；

缺点：

1、额外加入了js文件（6.39k）和http请求，可以忽略不计；

2、当文件载入之前，会先暂时呈现灰底；

3、js文件过多的时候，可能会报错，导致js无法正常运行（这种情况极少出现，可以忽略不计）；

以上就是本文讲述IE6兼容透明背景图片及解决方案的全部内容，希望对大家有所帮助。

本篇文章版权由苏州空谷网络科技有限公司所有，如需转载，请注明出处！