解决IE6下PNG背景图片不透明方案

今天终于完成首页的调整任务，用常用的几个浏览器查看一切安好，接近尾声，ie6,又是ie6 所有png图片的透明背景全部显示灰色，到处差东东，以下是解决办法核心代码CSS：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。


已知问题：
滤镜会使图片覆盖在文本层之上，使超链接和按钮等失效。并没有设置为背景的选项。

尚不完美的解决方法：
将div、链接或按钮设置相对位置，使之浮动。

1.此法文字仍会显示为在半透明下的模糊效果。
2.div/label/gridview等长度的变化将不会引起容器长度的自动适应。

摘几段代码和方法：

把下面的代码放在head区就可以解决问题了。
<!--[if gte IE 5.5000]><script type="text/javascript" src="js/pngfix.js"></script><![endif]--> 
pngfix.js文件的程序代码：

 1 function correctPNG() 
 2 {
 3 for(var i=0; i<document.images.length; i++)
 4 {
 5  var img = document.images[i]
 6  var imgName = img.src.toUpperCase()
 7  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 8  {
 9   var imgID = (img.id) ? "id='" + img.id + "' " : ""
10   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
11   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
12   var imgStyle = "display:inline-block;" + img.style.cssText 
13   if (img.align == "left") imgStyle = "float:left;" + imgStyle
14   if (img.align == "right") imgStyle = "float:right;" + imgStyle
15   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle  
16   var strNewHTML = "<span " + imgID + imgClass + imgTitle
17   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
18  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
19   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
20   img.outerHTML = strNewHTML
21   i = i-1
22  }
23 }
24 }
25 window.attachEvent("onload", correctPNG);

另一个官方解决方案的核心函数：

 1 /* 
 2 Correctly handle PNG transparency in Win IE 5.5 &amp; 6. 
 3 Copyright 2007 Ignia, LLC 
 4 Based in part on code from from http://homepage.ntlworld.com/bobosola. 
 5  
 6 Use in  with DEFER keyword wrapped in conditional comments: 
 7  
 8 <script type="text/javascript" defer="true" src="pngfix.js"></script> 
 9  
10 */ 
11  
12 function fixPng() { 
13   var arVersion = navigator.appVersion.split("MSIE") 
14   var version = parseFloat(arVersion[1]) 
15  
16   if ((version &gt;= 5.5 &amp;&amp; version &lt; 7.0) &amp;&amp; (document.body.filters)) { 
17     for(var i=0; i<document.images.length;></document.images.length;>      var img = document.images[i]; 
18       var imgName = img.src.toUpperCase(); 
19       if (imgName.indexOf(".PNG") &gt; 0) { 
20         var width = img.width; 
21         var height = img.height; 
22         var sizingMethod = (img.className.toLowerCase().indexOf("scale") &gt;= 0)? "scale" : "image"; 
23         img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')"; 
24         img.src="images/blank.gif" mce_src="images/blank.gif"; 
25         img.width = width; 
26         img.height = height; 
27         } 
28       } 
29     } 
30   }

辨别浏览器功能
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。如下
html>body #png {background: url(images/bg.png) repeat;}
而对于IE，我们都通过滤镜的方法来定义，或许有人问，IE7不是支持PNG透明图片吗？是的，不错，IE7是支持PNG透明图片，但IE7也支持AlphaImageLoader滤镜，为了避免使用PNG图片和滤镜冲突造成的不便，我们统一在IE中使用AlphaImageLoader滤镜。我们通过只有IE才识别的通配符（*），来定义IE浏览器中的滤镜。如下：
* html #png {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg.png");
background:none;
}
这样综合起来的决绝方法就是：
html>body #png {background: url(images/bg.png) repeat;}

html #png {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg.png");
background:none;
}

以上资料来自网络。

posted @ 2013-09-16 17:37  skill  阅读(239)  评论(0)  编辑  收藏  举报