|
 
- 帖子
- 141
- 积分
- 565
- 阅读权限
- 200
- 最后登录
- 2009-1-7
|
楼主
发表于 2008-8-30 20:04
| 只看该作者
div+css实现png图片和背景图在IE、Firefox中透明
一、实现png图片的办法：) C( d6 }- r- H$ {! g! n
1 M! b7 L) U( t* ?& G. }
1、FireFox和IE 7中不需要任何代码，自动实现png透明；
2 ? p5 @' H2 k3 H7 ^6 J: q! d b! z3 R- Y
2、IE 5.5-6中要实现png透明可以在html文档中添加下面这段javascirpt：-
- var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (document.body.filters)) { 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 } } }
5 x- |* ~( Z! X( B7 ?二、实现png背景图透明9 M. `- @* }( J6 l* J% i" D/ N
# u) e5 ], w4 P- N4 m: N/ L下面的css代码是我实现FireFox和IE均实现透明的代码：- .uListBottom {margin-bottom:20px;width:200px;height:39px;background-repeat: no-repeat;background-position: 0px 0px;} html>body .uListBottom {background-image: url(/Novel.Web/Themes/default/images/nav_bottom_bg.png);} * .uListBottom {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/Novel.Web/Themes/default/images/nav_bottom_bg.png");}
, [/ g3 x2 t, R/ zJS代码为：- /* Correctly handle PNG transparency in Win IE 5.5 & 6. http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006. Use in <HEAD> with DEFER keyword wrapped in conditional comments */ var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (document.body.filters)) { 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 } } }
|
|
