欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

IE6 png背景图片显示不正常处理

发布时间：2025/3/19 编程问答 34 豆豆
生活随笔 收集整理的这篇文章主要介绍了 IE6 png背景图片显示不正常处理 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

http://xiaoboss.iteye.com/blog/1167829

现在web设计，画面是越来越炫

但是使用了透明的背景图，在IE6下，

在ie78 ff等浏览器显示正常。

 解决办法：

Html代码  
  • body{ background-color:#CCC;}  
  • 一般普通写法如下：  
  • div.bg1{ background:url(logo.png) no-repeat center;width:100px; height:100px;}  
  • 特殊处理写法如下：  
  • /** Only Used For IE */  
  • *.bg2{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="logo.png"); width:100px; height:100px;}  
  • /** Only Used For FF,Sa*/  
  • html > body .bg2{ background:url(logo.png) no-repeat center;width:100px; height:100px;}  

    •   

    一下是html调用css写法:

    Html代码  
  • <body>  
  •     <div class="bg1">test content</div>  
  •     <hr/>  
  •     <div class="bg2">test content</div>  
  • </body>  

    •  

    一下为ie7对比显示，上面为一般写法，可以发现ie6处理的不好。

    下面为特殊写法，可见比较完美。

    分析：

     ie系列浏览器可以通过filter 属性来设置背景图，而filter属性在除ie系列浏览器就不生效。

    所以这里想到hack处理办法。

     

    IE系列自己特殊的css写法可以通过*，*.bg2 这种css样式只能在ie系列浏览器生效

    同样使用html > body .bg2，只有IE系列不生效的写法。

    这样可以看出效果在ie ff等下都显示正常

     

     

     案例1:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。（注意两处图片的路径写法不一样，本例中，icon_home.png图片与html文件在相同目录）

     

    Html代码  
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  • <html xmlns="http://www.w3.org/1999/xhtml">  
  • <head>  
  • <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  • <title>无标题文档</title>  
  • <style type="text/css">  
  • <!--  
  • .qq {  
  • height: 90px;  
  • width: 90px;  
  • background-image: url(icon_home.png)!important;/* FF IE7 */  
  • background-repeat: no-repeat;  
  •   
  • _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */  
  • _ background-image: none; /* IE6 */  
  • }  
  • -->  
  • </style>  
  • </head>  
  •   
  • <body>  
  •   
  • <div class="qq"></div>  
  •   
  • </body>  
  • </html>  

    •  

     

    案例2: 给img定义样式，页面上所有透明png即自动透明了。（这方法只对直接插入的图片有效，对背景图无效）注意，要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
    请勿大量使用，否则会导致页面打开很慢!!!)

     

    Html代码  
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  • <html xmlns="http://www.w3.org/1999/xhtml">  
  • <head>  
  • <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  • <title>无标题文档</title>  
  • <style type="text/css">  
  • .mypng img {  
  • azimuth: expression(  
  • this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",  
  • this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",  
  • this.src = "transparent.gif"):(thisthis.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),  
  • this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",  
  • this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);  
  • }  
  •   
  • </style>  
  • </head>  
  •   
  • <body>  
  • 换成你的png图片  
  • <div class="mypng">  
  • <img src="icon_face_07.png" width="30" height="30" />  
  • <img src="icon_face_10.png" width="30" height="30" />  
  • <img src="icon_face_08.png" width="30" height="30" />  
  • </div>  
  • </body>  
  • </html>  

    •  

    案例3:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）

     

    Html代码  
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  • <html xmlns="http://www.w3.org/1999/xhtml">  
  • <head>  
  • <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  • <title>无标题文档</title>  
  • <script language="JavaScript">   
  • function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.   
  • {   
  •     var arVersion = navigator.appVersion.split("MSIE")   
  •     var version = parseFloat(arVersion[1])   
  •     if ((version >= 5.5) && (document.body.filters))   
  •     {   
  •        for(var j=0; j<document.images.length; j++)   
  •        {   
  •           var img = document.images[j]   
  •           var imgimgName = img.src.toUpperCase()   
  •           if (imgName.substring(imgName.length-3, imgName.length) == "PNG")   
  •           {   
  •              var imgID = (img.id) ? "id='" + img.id + "' " : ""   
  •              var imgClass = (img.className) ? "class='" + img.className + "' " : ""   
  •              var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "   
  •              var imgStyle = "display:inline-block;" + img.style.cssText   
  •              if (img.align == "left") imgStyle = "float:left;" + imgStyle   
  •              if (img.align == "right") imgStyle = "float:right;" + imgStyle   
  •              if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle   
  •              var strNewHTML = "<span " + imgID + imgClass + imgTitle   
  •              + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"   
  •              + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"   
  •              + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"   
  •              img.outerHTML = strNewHTML   
  •              jj = j-1   
  •           }   
  •        }   
  •     }       
  • }   
  • window.attachEvent("onload", correctPNG);   
  • </script>  
  • <style type="text/css">  
  • <!--  
  • body {  
  • background-color: #9999CC;  
  • }  
  • -->  
  • </style></head>  
  •   
  • <body>  
  • 把图片换成你自己的图片  
  • <img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->  
  • <img src="img/icon_face_05.png" width="30" height="30" />  
  • <img src="img/menu_title_over.png" width="130" height="36" />  
  • </body>  
  • </html>       

    •  案例4：

     

    Html代码  
  • <script language="javascript">  
  • // 修复 IE 下 PNG 图片不能透明显示的问题  
  • function fixPNG(myImage) {  
  • var arVersion = navigator.appVersion.split("MSIE");  
  • var version = parseFloat(arVersion[1]);  
  • if ((version >= 5.5) && (version < 7) && (document.body.filters))  
  • {  
  •      var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";  
  •      var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";  
  •      var imgTitle = (myImage.title) ? "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' ";  
  •      var imgStyle = "display:inline-block;" + myImage.style.cssText;  
  •      var strNewHTML = "<span " + imgID + imgClass + imgTitle  
  •   
  •    + " style=\"" + "width:" + myImage.width  
  •   
  •    + "px; height:" + myImage.height  
  •   
  •    + "px;" + imgStyle + ";"  
  •   
  •    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"  
  •   
  •    + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";  
  •      myImage.outerHTML = strNewHTML;  
  • } }   
  •   
  • window.οnlοad=function(){  
  •          document.getElementById("top").style.height=screen.height/5+"px";  
  •           
  • }//  
  • </script>  

    •  

    用法如下：
    <img src="logo.png" width="328" height="325" border="0" οnlοad="fixPNG(this)" />

     

    以下是微软官方提供的解决方法:

    Js代码 
  • /*  
  • Correctly handle PNG transparency in Win IE 5.5 & 6. 
  • Copyright 2007 Ignia, LLC 
  • Based in part on code from from http://homepage.ntlworld.com/bobosola. 
  •  
  • Use in <HEAD> with DEFER keyword wrapped in conditional comments: 
  • <!--[if lt IE 7]> 
  • <script defer type="text/javascript" src="pngfix.js"></script> 
  • <![endif]--> 
  •  
  • */  
  •   
  • function fixPng() {  
  •   var arVersion = navigator.appVersion.split("MSIE")  
  •   var version = parseFloat(arVersion[1])  
  •   
  •   if ((version >= 5.5 && version < 7.0) && (document.body.filters)) {  
  •     for(var i=0; i<document.images.length; i++) {  
  •       var img = document.images[i];  
  •       var imgName = img.src.toUpperCase();  
  •       if (imgName.indexOf(".PNG") > 0) {  
  •         var width = img.width;  
  •         var height = img.height;  
  •         var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image";   
  •         img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')";  
  •         img.src = "images/blank.gif";  
  •         img.width = width;  
  •         img.height = height;  
  •         }  
  •       }  
  •     }  
  •   }  
  •   
  • fixPng(); 

    • 转载于:https://www.cnblogs.com/zhp404/articles/3974913.html

    总结

    以上是生活随笔为你收集整理的IE6 png背景图片显示不正常处理的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。