png在ie下显示不正常

最新推荐文章于 2020-11-28 21:18:03 发布

最新推荐文章于 2020-11-28 21:18:03 发布 · 113 阅读

文章标签：

#IE #CSS #Microsoft #HTC #JavaScript #ViewUI

pNG半透明背景图片效果
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的文件，内容如下：

Css代码

*htmlimg,*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 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文件的程序代码