首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

(转)解决ie6上png图片不透明方法

2012-09-09 
(转)解决ie6下png图片不透明方法第 1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片

(转)解决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 name="code"><!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 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) && (version < 7) && (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 {background-color: #9999CC;}--></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)" />

热点排行