本帖最后由 ppll0001 于 2010-6-28 16:15 编辑
回复
你要是做网站的LOGO 做成 PNG的试试就知道了 记得要在IE6看哦 我们不能总想着自己用IE8 ...
592xc.net 发表于 2010-6-28 02:51 
IE6对24位PNG的透明位置显示不出来,确实支持不好,我给你点解决办法。
第一种,只是背景,那么加上滤镜。。。
CSS中这样写:- .pic { background:url(123.png) no-repeat; _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='123.png');}
复制代码 然后把这个样式指定到需要的DIV这种写法可以让背景 PNG 透明掉,但是有缺陷,背景图不可以平铺,还有如果在这个 pic 容器里有按钮等比如类似DZX的搜索在IE6下会失效,那么就在容器里给个 position:relative 属性。。
第二种,插入的图像是 PNG 而不是背景,这个不能多用,如果用多了,网页载入会很慢的。。。
css中这样写:- * html .pic img{ azimuth: expression_r(
- 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 = "abc.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); }
复制代码 abc.gif 自己弄张透明的图,大小不限制。。
然后- <div class="pic"><img src="123.png" /></div>
复制代码 这样,这个PNG就可以透明了。。。。 注意,只有在 DIV 的 class 为 pic 的时候插入才透明,如果你想全站 PNG 图片插入都透明,那就改成但是绝对不建议这样使用。。。
上面就可以解决PNG在IE6的透明问题。。。。
还有种方法,以 JS 来实现,使用后全站的 PNG 图片也透明,但是不能用在背景上,我也给你写上:- <script language="JavaScript">
- function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
- {
- var arVersion = navigator.appVersion.split("MSIE")
- var version = parseFloat(arVersion[1])
- if ((version >= 5.5) && (document.body.filters))
- {
- for(var j=0; j<document.images.length; j++)
- {
- var img = document.images[j]
- 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
- j = j-1
- }
- }
- }
- }
- window.attachEvent("onload", correctPNG);
- </script>
复制代码 这段代码,你可以直接放在之间,也可以保存为 .js 文件,比如叫 123.js 然后在 <head></head> 之间插入- <script src="123.js" type="text/javascript"></script>
复制代码 就可以了
之后这样的将全部透明。。。。。。。。
|