天天看点

IE6下PNG图片透明问题

      这个问题其实包括两个方面,一是作为图片的透明度问题,即使用IMG标签的PNG图片的透明度,二是PNG图片作为背景情况下的图片透明度问题。对于第一个问题,如果是单张图片的话,可使用如下方法解决:

IE6下PNG图片透明问题
IE6下PNG图片透明问题

Code

<!--empty.gif为一张全透明的空白图片 没有则留空-->

<img id='show_comment' src="empty.gif" style="width:100px;height:12px;cursor:pointer;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='001.png',sizingMethod='image')">

如果图片很多的话,则可使用如下方法处理:

IE6下PNG图片透明问题
IE6下PNG图片透明问题

function correctPNG()

{

  for(var i=0; i<document.images.length; i++)

  {

   var img = document.images[i]

   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

   i = i-1

   };

  };

};

if(navigator.userAgent.indexOf("MSIE")>-1)

window.attachEvent("onload", correctPNG);

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程师和设计师必读精华文章推荐</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷!15个精美的 HTML5 单页网站作品欣赏</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫!35个让人惊讶的 CSS3 动画效果演示</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">赞!30个与众不同的优秀视差滚动效果网站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å!25个优秀的国外单页网站设计作品欣赏</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帅!8个惊艳的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">顶!35个很漂亮的国外 Flash 网站作品欣赏</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇!34个漂亮网站和应用程序后台管理界面</a>

IE6下PNG图片透明问题

<a href="http://www.yyyweb.com/go/web" target="_blank">本博客新站点 ◆ 前端里 ◆ 欢迎围观:)</a>

欢迎任何形式的转载,但请务必注明出处。

继续阅读