欢迎拨打空谷咨询电话

4006-515-848

您也可以咨询我们的在线客服或预约上门

在线客服 预约上门

预约上门

我们

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兼容透明背景图片及解决方案的全部内容,希望对大家有所帮助。

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


查看更多咨询热线

次点赞咨询热线

© 2008-2017 苏州空谷网络科技有限公司 版权所有 苏ICP备10077873号