Div+css首页

IE中32位色PNG透明背景图片透明处理

IE中32位色PNG透明背景图片透明处理
时间: 2006-10-24 12:53:20 浏览:1627 
今天的一个问题,32位色的透明背景PNG图片无法有IE上透明处理,在其实很早的时候就遇到过.因为有两年多没搞过了,也就不记得了.
在这里提供解决方案二个.可以用css或Javascript处理!

js:
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

function fixPNG(myImage)
{
   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    
   }
}

以上这段代码保存为pngfix.js文件,然后在HTML文件的<head> </head>之间插入<script type="text/javascript" src="pngfix.js"></script>,记住保存啦.
要被处理的图片可以这么用<img src="/csssite/uploadfile/200806/23/EE2382801.png" alt="foo" width="10" height="20" onload="fixPNG(this)">



CSS:
.trans_box2 {
 font-family:verdana;
 font-weight:bold;
 padding:40px;
 margin:30px;
 border:solid 1px #555;
 /* Mozilla ignores crazy MS image filters, so it will skip the following */
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=''''/csssite/uploadfile/200806/23/472382475.png'''');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box2[class] {
 background-image:url(/csssite/uploadfile/200806/23/472382475.png);
}


HTML:
<div style="float:left;background-image:url(flowers.jpg);border:solid 1px #000;padding:10px;">
<div class="trans_box1" style="float:left;">
I like flowers.
</div>
<div class="trans_box1" style="float:left;">
They smell nice.
</div>
<div class="trans_box2" style="float:left;">
<a href="When'''' target=_blank>http://www.divhome.com/#.google.com/search?q=flowers+bees+honey">When combined with bees, they make honey...</a>
</div>



引用
语法:
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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
来源:Xeon[祺]
Div之家