解决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 ...

随机推荐

mongodb分片认证
启动configsvr 1. 确保mongdb的configsvr是采用service模式启动的,即从/etc/init.d下的脚本启动的,其用户是mongod. 2. 确保mongod的配置文件完全 ...
linq any() all() 返回true 或者false
一.any()只要有一个符合条件就返回true static void Main(string[] args) { //any 有符合条件的就返回true ,,,,,,,,,}; ); Console ...
swool安装
swoole安装安装完PHP后,即可安装swoole扩展. swoole扩展下载地址:https://github.com/swoole/swoole-src/releases 尽量选择stable ...
ShellExecute快捷键大全
文件夹,文件,网址可以创建快捷方式,控制面板中的设置也可以创建快捷方式,下面是快捷方式的命令,使用方法:在桌面或文件夹的空白处点右键,选择新建,快捷方式,在"请键入项目的位置"输 ...
MFC 透明内存DC
在MFC中绘制比较复杂图形,通常采用双缓冲技术来绘图,的确可以大大加快绘制速度和减少闪烁,但是有些情况也不尽然. 我最近遇到了一个问题,采用的也是双缓冲来加快绘图,但是绘制效果还是不尽人意.A对象里大 ...
小蚂蚁搬家<贪心>
题意: 由于预知未来可能会下雨,所以小蚂蚁决定搬家.它需要将它的所有物品都搬到新家,新家的体积为V,小蚂蚁有N件物品需要搬,每件物品的体积为Ai,但他发现:每件物品需要新家剩余体积大于等于Bi才能使它 ...
php 执行效率
用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册中 ...
HDU2952:Counting Sheep(DFS)
Counting Sheep Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Tota ...
eclipse Dynamic web project 工程目录
如图,我创建了一个work 的web project,当工程完成之后,部署在服务器上时,整个work工程会被打包成一个war包,如除了可以在eclipse上运行,工具会帮我们自动部署在服务器上之外, ...
c++数组指针bug
ClassA* csList = ]; ClassA ca = csList[]; ca.x=; CCLOG(].x);//output: caList[0].x -431602080.000000 ...

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

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

随机推荐

热门专题