第 1 种方法:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。（注意两处图片的路径写法不一样，本例中，icon_home.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>

<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相同的目录
请勿大量使用，否则会导致页面打开很慢!!!)

<!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"):(this.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自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）

<!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 imgName = 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

             j = j-1

          }

       }

    }

}

window.attachEvent("onload", correctPNG);

</script>

<style type="text/css">

<!--

body {

}

-->

</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>

　　

方法四

<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.onload=function(){

         document.getElementById("top").style.height=screen.height/5+"px";

}//

</script>

　　

用法如下：

<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. perl的INC

    perl中的INC变量中包含了所有的perl module的查找路径. 查看@INC的值. 方式一: perl -V 方式二: % perl -e 'print join "\n" ...

  2. hibernate ——helloWorld程序（XML配置）

    1.项目结构 2.hibernate实现了Java类 和 数据库表的映射(Map) 先看一下Student的Java类和对应的数据库表 package com.pt.hibernate; public ...

  3. OpenGL-------状态机

    状态机就是一种存在于理论中的机器,它具有以下的特点: 1. 它有记忆的能力,能够记住自己当前的状态. 2. 它可以接收输入,根据输入的内容和自己的状态,修改自己的状态,并且可以得到输出. 3. 当它进 ...

  4. JSTL标签库---SUN公司开发的标签库

    JSTL里的标签包含五大类标签: 核心标签库 国际化标签 JSTL函数(EL函数) 数据库标签// 操作数据库的,用不到了 XML标签//操作XML的,用不到了 都在jstl.jar,standar. ...

  5. php 四种基础算法 ---- 选择排序法

    2. 选择排序法: 选择排序法思路: 每次选择一个相应的元素,然后将其放到指定的位置 代码: function select_sort($arr) {//实现思路 双重循环完成,外层控制轮数,当前的最 ...

  6. Swift\本地文件管理

    转载自:http://www.coloroud.com/2015/06/01/Swift-File-Manager/ 开头 看来Swift这趟浑水是非干不可,既然如此,那索性就来的彻底吧,来一次全方位 ...

  7. Lucene入门教程

    Lucene教程 1 lucene简介 1.1 什么是lucene     Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么 ...

  8. cc2530-----串口透明传输分析

    Zigbee协议栈学习之串口透明传输实验(SerialApp)流程分析   第一个功能:协调器的组网,终端设备和路由设备发现网络以及加入网络 //第一步:Z-Stack 由 main()函数开始执行, ...

  9. 2016中国大学生程序设计竞赛 - 网络选拔赛 1001 A water problem　（大数取余）

    Problem Descripton Two planets named Haha and Xixi in the universe and they were created with the un ...

  10. PAT (Advanced Level) 1108. Finding Average (20)

    简单模拟. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #i ...