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

2023-02-20 07:17:40

第 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

码农公寓

相关文章