HTML5学堂-码匠 HTML5学堂

您当前位于:项目兼容问题 ——> 浏览器常见兼容问题-IE6的png透明问题的解决方法

浏览器常见兼容问题-IE6的png透明问题的解决方法

2015/05/04 11:58:58 | 作者:HTML5学堂(码匠) | 分类:项目兼容问题 | 关键词:浏览器兼容,IE6,png,透明,滤镜

PNG兼容IE6解决方法

HTML5学堂:在项目开发中,PNG图片格式也是经常遇到,但是在IE6上存在兼容问题,也是让大家很头疼的问题。本文给大家介绍了三种方法,来解决PNG图片格式在IE6上的兼容问题,有图有真相哦~赶紧来看看~

IE6不兼容png图片,确实让网页的图片质量大大下降,为了兼容万恶的IE6,总结了一下三种方法:

①通过CSS滤镜使背景图的PNG对IE6进行兼容。

②给img定义样式,页面上所有透明png即自动透明了。

③通过JS,插入一段代码,实现img标签png兼容IE6的问题。

大家先看一下没有做兼容IE6之前的效果,看着就头疼
HTML5学堂 PNG兼容IE6解决方法 h5course

1、通过CSS滤镜使背景图的PNG对IE6进行兼容

定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了。
HTML5学堂 PNG兼容IE6解决方法 h5course

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.  <title>png兼容IE6问题解决方法</title>
  6.  <style>
  7.  body{background: lightblue;}
  8.  .png{
  9.   width: 550px;
  10.   height: 500px;
  11.   background-image: url(pic.png)!important;/* FF IE7 */ 
  12.   background-repeat: no-repeat;
  13.   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic.png');  /*IE6*/  
  14.   _ background-image: none; /* IE6  */
  15.   overflow: hidden;
  16.  } 
  17.  </style>
  18. </head>
  19. <body>
  20.  <div class="png">
  21.   <div>通过CSS滤镜使背景图的PNG对IE6进行兼容</div>
  22.  </div>
  23. </body>
  24. </html>

欢迎沟通交流~HTML5学堂

2、给img定义样式,页面上所有透明png即自动透明了。

HTML5学堂 PNG兼容IE6解决方法 h5course

注意:这方法只对直接插入的图片有效,对背景图无效。要准备一个透明的小图片transparent.gif,大小不限,并将gif的图片放在跟png图片一个文件夹里。请勿大量使用,否则会导致页面打开很慢!!!不过这种方法设置图片的不能控制其大小。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.  <title>png兼容IE6问题解决方法</title>
  6.  <style>
  7.  body{background: lightblue;}
  8.  .imgpng img { 
  9.   azimuth: expression(
  10.   this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", 
  11.   this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", 
  12.   this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), 
  13.   this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", 
  14.   this.runtimeStyle.backgroundImage = "none")),this.pngSet=true); }
  15.  </style>
  16. </head>
  17. <body>
  18.  <div class="imgpng">
  19.   <img src="pic.png" /> 
  20.   img标签你就在IE6下显灵吧
  21.   <img src="pic.png" /> 
  22.  </div>
  23. </body>
  24. </html>

3、通过JS,插入一段代码,实现img标签png兼容IE6的问题

HTML5学堂 PNG兼容IE6解决方法 h5course
  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.  <title>png兼容IE6问题解决方法</title>
  6.  <script language="JavaScript"> 
  7.  function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. 
  8.  { 
  9.      var arVersion = navigator.appVersion.split("MSIE") 
  10.      var version = parseFloat(arVersion[1]) 
  11.      if ((version >= 5.5) && (document.body.filters)) 
  12.      { 
  13.         for(var j=0; j<document.images.length; j++) 
  14.         { 
  15.            var img = document.images[j] 
  16.            var imgName = img.src.toUpperCase() 
  17.            if (imgName.substring(imgName.length-3, imgName.length) == "PNG") 
  18.            { 
  19.               var imgID = (img.id) ? "id='" + img.id + "' " : "" 
  20.               var imgClass = (img.className) ? "class='" + img.className + "' " : "" 
  21.               var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " 
  22.               var imgStyle = "display:inline-block;" + img.style.cssText 
  23.               if (img.align == "left") imgStyle = "float:left;" + imgStyle 
  24.               if (img.align == "right") imgStyle = "float:right;" + imgStyle 
  25.               if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
  26.               var strNewHTML = "<span " + imgID + imgClass + imgTitle 
  27.               + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
  28.               + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
  29.               + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
  30.               img.outerHTML = strNewHTML 
  31.               j = j-1 
  32.            } 
  33.         } 
  34.      }     
  35.  } 
  36.  window.attachEvent("onload", correctPNG); 
  37.  </script>
  38.  <style>
  39.  body{background: lightblue;}
  40.  div img{bottom: 3px solid yellow;}
  41.  </style>
  42. </head>
  43. <body>
  44.  <div class="imgpng">
  45.   <img src="pic.png"/>
  46.  </div>
  47. </body>
  48. </html>

总结了这三种方法,都亲自试验过了,有图有真相,大家可以根据自己的实际情况进行选择。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端