解决IE6中PNG图出现灰色背景问题

第 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图出现灰色背景问题的更多相关文章

下拉tableView实现类似微信中带图的灰色背景
UIView *topView = [[UIView alloc]initWithFrame:CGRectMake(, -, ScreenWidth, )]; UIImageView *iconIma ...
解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背
解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背目录解决代码解决png图片在html中解决png作为网页背景-css 1.解决PNG图片在IE6中背景不透明的CSS与JS代码 ...
解决IE6中 PNG图片透明的终极方案-八种方案！
“珍惜生命,远离IE6”,IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放弃了很多很炫的效果, ...
解决ie6中png图片格式不兼容问题
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...
解决IE6中ajax ‘aborted’错误请求中断
给a标签绑定了一个click事件用来触发ajax请求,在IE6中,请求时常会被中断,在其他浏览器中都一切正常. 在IE6中使用Fiddler2和httpWatch监视请求,经常会出现”aborted” ...
完美解决IE6中fixed抖动问题的方法
我们可以通过position:fixed来实现元素的固定效果,如网页中底部的"回到顶部菜单",底部的toolbar,对联广告等等,可惜fixed属性在IE6及以下是不支持的.通常的 ...
解决IE6中img标签图片透明
<!--[if IE 6]> <script type="text/javascript"> function correctPNG() { for (va ...
IE6中 PNG 背景透明的最佳解决方案
为什么要使用 PNG 图片? 简单来说,使用 PNG 格式比起 GIF 来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多.目前,最新的浏览器基本上都支持PNG格式.唯独有万恶 ...
IE6中的常见BUG与相应的解决办法
开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE ...

随机推荐

还在纠结 Flux 或 Relay，或许 Redux 更适合你
重磅消息,Redux 1.0 发布,终于可以放心用于生产环境了! 在这个端应用技术膨胀的时代,每天都有一大堆框架冒出,号称解决了 XYZ 等一系列牛 X 的问题,然后过一段时间就不被提起了.但开发的应 ...
在Linux系统如何让程序开机时自动启动
在Linux系统如何让程序开机时自动启动核心提示:系统的服务在开机时一般都可以自动启动,那在linux系统下如果想要程序在开机时自动启动怎么办?我们知道在 windows系统“开始”--& ...
Android Service学习之IntentService 深入分析
什么是IntentService? (本文转自http://blog.csdn.net/gaojie314/archive/2010/11/28/6040701.aspx) 官方的解释是: ...
Augular JS里的各种ng
Augular JS里的各种ng- 正文: 1．ng-disabled="一种状态:该状态下不可用"例如: %button.btn.btn-2(ng-disabled=" ...
基于Sublime Text搭建Python IDE
http://loosky.net/2967.html(包括SublimeREPL插件的安装和设置快捷键) SublimeCodeIntel,智能提示功能,查找自定义函数引用的快捷键--Alt+鼠标左 ...
fpSpread1 简单用法
//如果汇总的话直接可在模板里面填写公式,不过要有三行空行才行比如SUM(A1,A2,A3) fpSpread1.Sheets[0].RowCount = 30; fpSpread1.Sheets[ ...
Hadoop: LongWritable cannot be cast to org.apache.hadoop.io.IntWritable
写MR Job的时候遇到一个坑爹的异常: LongWritable cannot be cast to org.apache.hadoop.io.IntWritable 当写Map的时候,key的默认 ...
PAT (Advanced Level) 1099. Build A Binary Search Tree (30)
预处理每个节点左子树有多少个点. 然后确定值得时候递归下去就可以了. #include<cstdio> #include<cstring> #include<cmath& ...
hdu_1007_Quoit Design(最近点对)
题目连接:hdu_1007_Quoit Design 题意: 给你平面上的一些点,让你找出这些点的最近点对的距离题解: 采用分治,达到O(nlognlogn)的时间复杂度就能艹过去了 #includ ...
scroll、scrollBy和 scrollTo三种方法定位滚动条位置
在默认情况下,页面加载完后默认滚动在最顶端,有些时候我们需要在页面打开后,定位滚动条的位置,比如,横向和纵向滚动条居中,实现页面滚动的方法有三种:scroll.scrollBy和 scrollTo,三 ...

解决IE6中PNG图出现灰色背景问题

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

随机推荐

热门专题