完美解决IE中PNG格式透明背景图片显示异常的各种方法【Z】

lc52520

浏览: 373296 次
性别:
来自: 成都

最近访客更多访客>>

wuha520

xiangxingchina

William_Third

zhanliping1981

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java web

IE CSS HTC Microsoft JavaScript

NG半透明背景图片效果
PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出实用,绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。

IE5.5+的 AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型。

经过多方面的实验比较了2种方法：css控制和js控制。总结如下：

css中镶入如下代码控制：

#png{background-image:url(images/jzz_02.png) no-repeat !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="images/jzz_02.png");
background:none;}

    比较累，需要一个个添加代码。而且用了滤镜后背景图片不支持background-position定位

    具体代码：

//总css文件 style.css

#png{

background:url(image.png) no-repeat center !important;
}

//CSS代码中镶入ie6配置CSS配置文件 ie6.css

#png{

background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',enabled='true', sizingMethod='scale');

}

//html格式

<head>
...
<link href="style.css" rel="stylesheet" type="text/css" />

</head>
...

注：style.css文件里的图片url是相对于css文件的路径，ie6.css文件里src是相对于html文件的路径

JS控制：

比较方便，适合懒人- -！，但bug比较多，效率相对于css要低

比较常用的js代码：

1.

correctpng.js

// JavaScript Document

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
        }
      }
   }
function alphaBackgrounds(){
   var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i<document.all.length; i++){
      var bg = document.all[i].currentStyle.backgroundImage;
      if (bg){
         if (bg.match(/.png/i) != null){
            var mypng = bg.substring(5,bg.length-2);
   //alert(mypng);
            document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='crop')";
            document.all[i].style.backgroundImage = "url('')";
   //alert(document.all[i].style.filter);
         }
      }
   }
}

html

<head>
...
<script type="javascript" src="correctpng.js"></script>



</head>

注这个js方法不支持重复背景，如果背景重复的话就只能显示一个，别的都支持。

2.

使用先人写好的iepngfix类

这个类里面有3个文件

blank.gif替换为空白的图片

iepngfix.htc核心文件

iepngfix_tilebg.js貌似是控制重复背景的文件，不过我用了以后直接页面都显示不出- -!

具体用法：

在css文件里加入

img,div{

behavior: url("iepngfix.htc") ;

}

在html里head之间调用iepngfix_tilebg.js

注意最好blank.gif和htc文件放一个文件夹里习惯都放在image文件夹里

总结：我个人认为使用css文件会比较好点，这对程序美观度和效率都会有一定的提高。

总结完毕。

==================================================================

另外的方法

新建一个叫png_fix.css的文件，内容如下：

* html img,* html .png {
	behavior: expression(( this.runtimeStyle.behavior = "none") &&(
		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 =  
		"image/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 )
		);
}

然后在HTML文件的<LINK>部分加入<> 最后自己做一个1×1像素的透明gif图片，存为transparent.gif。使用的时候是这样： 1、如果是在HTML里面直接插入的PNG图片，就直接会处理掉； 2、如果是在css里面写的用作背景的图片，需要在

里面加上class="png"，最后就是

； 3、如果是链接，需要加上cursor: pointer；测试下来使用没有问题，非常完美。

=========================================================================

亲测成功的方法

把下面的代码放在head区就可以解决问题了。

pngfix.js文件的程序代码

分享到：

easyboot制作xp、win7、ubuntu、老毛桃winp ... | win7下的NETSH命令防止局域网内的ARP攻击 ...

2011-02-17 21:36
浏览 7098
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论