IE6下PNG背景透明的显示问题解决方案

最新推荐文章于 2024-07-24 11:09:48 发布

skot525

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量368

点赞数

文章标签： ie behavior filter javascript url float

引用地址：

http://www.unovo.cn/u-development/XHtml/2009/ie6-fix-png.html

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

PNG 图像格式介绍： PNG 是20 世纪90 年代中期开始开发的图像文件存储格式，其目的是企图替代GIF 和TIFF 文件格式，同时增加一些GIF 文件格式所不具备的特性。流式网络图形格式(Portable Netw

PNG 图像格式介绍：

PNG 是20 世纪90 年代中期开始开发的图像文件存储格式，其目的是企图替代GIF 和TIFF 文件格式，同时增加一些GIF 文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format ，PNG) 名称来源于非官方的“PNG’s Not GIF” ，是一种位图文件(bitmap file) 存储格式，读成“ping” 。PNG 用来存储灰度图像时，灰度图像的深度可多到16 位，存储彩色图像时，彩色图像的深度可多到48 位，并且还可存储多到16 位的α 通道数据。

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

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

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

一. IE6 使用gif ，其他则使用png 来解决PNG 背景灰使用于色彩较为简单的图片

缺点：若图片色彩较为丰富，比如金音源有按下去的效果若用gif 会丢失颜色信息。

1. .pngImg { background:url(image.png); _background:url(image.gif);}

注意上文的_ 号，目前IE7,8 以及Firefox 浏览器等都不支持此CSS 语法，只有IE6 识别。因此，其他浏览器会调用PNG ，而IE6 刚调用GIF 。

二. 滤镜filter 解决IE6 下背景灰

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

2. _background:none;

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

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

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

AlphaImageLoader 滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative; 这样条代码，使其相对浮动。 AlphaImageLoader 无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。

解决IE 下的链接无效可用最后面的方法：

三. 利用JS 解决html 中的img( 插入在网页中的png 图像) png 背景灰问题

1. function correctPNG()

2. {

3. for(var i=0; i {

4. var img = document.images[i]

5. var imgName = img.src.toUpperCase()

6. if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

7. {

8. var imgID = (img.id) ? "id='" + img.id + "' " : ""

9. var imgClass = (img.className) ? "class='" + img.className + "' " : ""

10. var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

11. var imgStyle = "display:inline-block;" + img.style.cssText

12. if (img.align == "left") imgStyle = "float:left;" + imgStyle

13. if (img.align == "right") imgStyle = "float:right;" + imgStyle

14. if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

15. var strNewHTML = " + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

16. + "(src=/'" + img.src + "/', sizingMethod='scale');/">"

17. img.outerHTML = strNewHTML

18. i = i-1

19. }

20. }

21. }

22. window.attachEvent("onload", correctPNG);

页面中插入一段js 即可。原理同上，只是将img 放入了background 。它会将所有插入的PNG 都如此处理。

这也是一端同样的JS

在网页head 部分引用下面的这段JS

1. function CorrectPNG(){

2. for(var i=0; i<document.images.length; i++) {

3. var img = document.images[i];

4. var imgName = img.src.toUpperCase();

5. if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

6. {

7. var imgID = (img.id) ? "id='" + img.id + "' " : "";

8. var imgClass = (img.className) ? "class='" + img.className + "' " : "";

9. var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";

10. var imgStyle = "display:inline-block;" + img.style.cssText ;

11. if (img.align == "left") { imgStyle = "float:left;" + imgStyle; }

12. if (img.align == "right") { imgStyle = "float:right;" + imgStyle; }

13. if (img.parentElement.href) { imgStyle = "cursor:hand;" + imgStyle; }

14. var strNewHTML = "<span " + imgID + imgClass + imgTitle;

15. + " style=/"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";";

16. + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";

17. + "(src=/'" + img.src + "/', sizingMethod='scale');/"></span>";

18. img.outerHTML = strNewHTML;

19. i = i-1;

20. };

21. };

22. };

23. if(navigator.userAgent.indexOf("MSIE") > -1){

24. window.attachEvent("onload", CorrectPNG);

25. };

四。调用iepngfix.htc 解决IE6PNG 背景灰及拉伸问题

此方法来自：http://www.twinhelix.com/css/iepngfix/ 此方法基于Winodws 平台，在Linux 下不支持htc, 没有验证过，但有网友发文证实。

以下片段添加至css 文件

1. .pngImg {behavior: url(iepngfix.htc);}

以下片段添加至html 文件

1. <div class="pngImg">PNG 背景图片</div>

2. <img src="png 图片" class="pngImg" alt="">

详细的应用方法这里就不介绍啦。

在逼不得已且身不由己必须使用PNG 的情况下，这种方法应该是比较优秀的，虽然不能完美的解决IE6 的平铺，但是至少是实现了拉伸，使得很多情况下可以代替平铺来使用。当然效率的问题任然是存在存在延时的问题也就是说先是不透明的过会儿才透明。

五. 让“ 块” 透明的方法（需是规则的透明）

1. .div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}

测试IE6,IE7,IE8,FF2,FF3 均通过。提示：IE6,IE7 需设置一个宽度(100% 也行) ，否则看不到效果。

六.DD_belatedPNG, 解决IE6 不支持PNG 绝佳方案

整个互联网上解决这个IE6 的透明PNG 的方案也是多不胜数, 从使用IE 特有的滤镜或是e xpression, 再到javascript+ 透明GIF 替代. 但是这些方法都有一个缺点, 就是不支持CSS 中backgrond-position 与 background-repeat . ( 现在htc 的新版本可以了。)

而我今天介绍DD_belatedPNG, 只需要一个理由, 就是它支持backgrond-position 与background-repeat. 这是其他js 插件不具备的. 同时DD_belatedPNG 还支持a:hover 属性, 以及<img> （这个很重要其它不支持我的金音源就是类似例子）

看Demo: http://www.ediyang.com/demo/DD_Png/

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

使用方法
1. 在这里下载DD_belatedPNG.js 文件.
http://dillerdesign.com/experiment/DD_belatedPNG/#download

2. 在网页中引用, 如下:

1. <!--[if IE 6]>

2. <script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>

3. <script type="text/javascript">

5. /* EXAMPLE */

6. DD_belatedPNG.fix('.png_bg');

7. /* 将 .png_bg 改成你应用了透明PNG 的CSS 选择器, 例如我例子中的'.trans'*/

8. </script>

9. <![endif]-->

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

使用a:hover 请留意
5-25 更新: 如果你也像jutoy 同学一样想要用透明PNG 作为a:hover 时的背景图片, 那么你需要留意你的代码, 需要以”a:hover” 来作为选择器. 否则可能会导致无法成功. 同时我也更新了demo, 请需要的更新查看. 接着我们看看正确的代码: