实现png图片和png背景透明（支持多浏览器）的方法

虽然有让IE6支持PNG透明背景的JS程序，都是不是很方便，还是用CSS来实现的好。使用到的就是：IE5.5+的AlphaImageLoader滤镜。 1.png背景透明解决办法：复制代码代码如下: #div1 { height: 600px; width: 260px; padding: 20px; background-repeat: repeat; } html>body #div1 { background-repeat: repeat;background-image: url(bj1.png); } * #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png") } 附加：IE才识别的通配符（*），来定义IE浏览器中的滤镜 Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>）语法： 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 地址指定背景图像。假如忽略此参数，滤镜将不会作用。 2.png图片透明如果在网页中直接插入png图片想使其透明只需加入以下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 网页彩蛋实现代码

.bg{ background:url(http://nba.titan24.com/focus/kikx/images/sp.gif) repeat;} p{ text-align:center; color:#d00; padding:10px 0; } h1{ text-align:center; font-size:80px; color:#f06; li>>>详细阅读

本文标题：实现png图片和png背景透明（支持多浏览器）的方法

地址：http://www.17bianji.com/kaifa2/JS/28163.html

1/2 1