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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. <!--
  8. .qq {
  9. height: 90px;
  10. width: 90px;
  11. background-image: url(icon_home.png)!important;/* FF IE7 */
  12. background-repeat: no-repeat;
  13.  
  14. _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */
  15. _ background-image: none; /* IE6 */
  16. }
  17. -->
  18. </style>
  19. </head>
  20.  
  21. <body>
  22.  
  23. <div class="qq"></div>
  24.  
  25. </body>
  26. </html>

　　

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. .mypng img {
  8. azimuth: expression(
  9. this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
  10. this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
  11. this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
  12. this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
  13. this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
  14. }
  15.  
  16. </style>
  17. </head>
  18.  
  19. <body>
  20. 换成你的png图片
  21. <div class="mypng">
  22. <img src="icon_face_07.png" width="30" height="30" />
  23. <img src="icon_face_10.png" width="30" height="30" />
  24. <img src="icon_face_08.png" width="30" height="30" />
  25. </div>
  26. </body>
  27. </html>

　　

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</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 type="text/css">
  39. <!--
  40. body {
  41.  
  42. }
  43. -->
  44. </style></head>
  45.  
  46. <body>
  47. 把图片换成你自己的图片
  48. <img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->
  49. <img src="img/icon_face_05.png" width="30" height="30" />
  50. <img src="img/menu_title_over.png" width="130" height="36" />
  51. </body>
  52. </html>

　　

方法四

  1. <script language="javascript">
  2. // 修复 IE 下 PNG 图片不能透明显示的问题
  3. function fixPNG(myImage) {
  4. var arVersion = navigator.appVersion.split("MSIE");
  5. var version = parseFloat(arVersion[1]);
  6. if ((version >= 5.5) && (version < 7) && (document.body.filters))
  7. {
  8.      var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
  9.      var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
  10.      var imgTitle = (myImage.title) ? "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' ";
  11.      var imgStyle = "display:inline-block;" + myImage.style.cssText;
  12.      var strNewHTML = "<span " + imgID + imgClass + imgTitle
  13.  
  14.    + " style=\"" + "width:" + myImage.width
  15.  
  16.    + "px; height:" + myImage.height
  17.  
  18.    + "px;" + imgStyle + ";"
  19.  
  20.    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  21.  
  22.    + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
  23.      myImage.outerHTML = strNewHTML;
  24. } } 
  25.  
  26. window.onload=function(){
  27.          document.getElementById("top").style.height=screen.height/5+"px";
  28.  
  29. }//
  30. </script>

　　

用法如下：

  1. <img src="logo.png" width="328" height="325" border="0" onload="fixPNG(this)" />

转载自http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html

解决IE6中PNG图出现灰色背景问题的更多相关文章

  1. 下拉tableView实现类似微信中带图的灰色背景

    UIView *topView = [[UIView alloc]initWithFrame:CGRectMake(, -, ScreenWidth, )]; UIImageView *iconIma ...

  2. 解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背

    解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背   目录 解决代码 解决png图片在html中 解决png作为网页背景-css 1.解决PNG图片在IE6中背景不透明的CSS与JS代码 ...

  3. 解决IE6中 PNG图片透明的终极方案-八种方案！

    “珍惜生命,远离IE6”,IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放弃了很多很炫的效果, ...

  4. 解决ie6中png图片格式不兼容问题

    在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...

  5. 解决IE6中ajax ‘aborted’错误请求中断

    给a标签绑定了一个click事件用来触发ajax请求,在IE6中,请求时常会被中断,在其他浏览器中都一切正常. 在IE6中使用Fiddler2和httpWatch监视请求,经常会出现”aborted” ...

  6. 完美解决IE6中fixed抖动问题的方法

    我们可以通过position:fixed来实现元素的固定效果,如网页中底部的"回到顶部菜单",底部的toolbar,对联广告等等,可惜fixed属性在IE6及以下是不支持的.通常的 ...

  7. 解决IE6中img标签 图片透明

    <!--[if IE 6]> <script type="text/javascript"> function correctPNG() { for (va ...

  8. IE6中 PNG 背景透明的最佳解决方案

    为什么要使用 PNG 图片? 简 单来说,使用 PNG 格式比起 GIF 来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多.目前,最新的浏览器基本上都支持PNG格式.唯独有万恶 ...

  9. IE6中的常见BUG与相应的解决办法

    开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE ...

随机推荐

  1. JSP基础语法--跳转指令 jsp:forward page

    带参数的跳转指令: <jsp:forward page="{路径|<%=表达式%>}"/> <jsp:param name="参数名称&qu ...

  2. linux expr命令参数及用法详解

    expr用法 expr命令一般用于整数值,但也可用于字符串.一般格式为: #expr argument operator argument expr也是一个手工命令行计数器. #$expr 10 + ...

  3. QML插件扩展2（基于C++的插件扩展）

    上一节介绍了纯QML的插件扩展方式,这种扩展方式基本满足大部分的扩展需求,下面开始介绍比较小众的基于C++的扩展 (一)更新插件工程 1.更新MyPlugin工程下的qmldir文件,加入plugin ...

  4. 初次stack-overflow 提交答案

    初次在stack-overflow上面提交答案,首先编辑器非常好用,语法检查都有, 还有付费版的,更高级,更好用,nice. 付费版:https://www.grammarly.com/upgrade ...

  5. win8.1下安装ubuntu 14.0 4LTS

    1.前奏 电脑上已经安装了win8.1系统 2.准备工作 关闭win8.1的快速启动 步骤: 控制面板->电源选项->选择电源按钮的功能->更改不可用的设置,然后把"启用快 ...

  6. Hibernate 系列教程5-双向多对一

    主要讲解inverse和cascade的用法 cascade定义的是关系两端对象到对象的级联关系: 而inverse定义的是关系和对象的级联关系(管理外键的值). inverse 属性默认是false ...

  7. POJ 2082Lost Cows<>

    题意: 给出一个序列a[1....n],a[i]代表在0....i-1中比a[i]小的个数. 求出这个序列. 思路: 1:暴力. #include<cstdio> #include< ...

  8. Swift 学习笔记 （一）

    原创: 转载请注明出处 Extention try catch rxSwift internal  public  private var  let as       as? 强转 ? ! didSe ...

  9. WebSocket学习笔记——无痛入门

    WebSocket学习笔记——无痛入门 标签: websocket 2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报  分类: 物联网学习笔记(37)  版权声明:本文为博主原 ...

  10. 使用runloop阻塞线程的正确写法

    使用runloop阻塞线程的正确写法 runloop可以阻塞线程,等待其他线程执行后再执行. 比如: @implementation ViewController{    BOOL end;}…– ( ...