IE浏览器PNG图片透明效果代码

首先看我们的<img>标签代码： <img src="Example.png" border="0" alt="放大镜" /> 我们将利用IE中特有的特效来满足这个要求，这就是AlphaImageLoader Filter (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp) 如何做？将下面代码保存为correctPNG.js: 复制代码代码如下: 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; margin:6px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');"></span>" img.outerHTML = strNewHTML i = i-1 } } } window.attachEvent("onload", correctPNG); 然后在你需要透明的网页中的<head>....</head>区加入：<script type="text/javascript" src="correctPNG.js"></script> 在<body>区加入多个与<img src="Example.png" border="0" alt="放大镜" />类似的PNG图片，试试看？另一种方法：复制代码代码如下: <html> <head> <title>alpha image</title> <style type="text/css"> .pngholder{ width:100px; height:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.jb51.net/attachments/200510/03_124401_ie.png'); } .pngalpha{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); background:url(http://www.jb51.net/attachments/200510/03_124401_ie.png) no-repeat; width:100px; height:100px; } </style> </head> <body bgcolor="#3399ff#"> <!- And this is your code to implement the image -> <div>透明</div> <div class="pngholder"><div class="pngalpha"></div></div> <div>不透明</div> <img src="http://www.jb51.net/attachments/200510/03_124401_ie.png"/> </body> </html>

　　推荐阅读

　　JavaScript国旗变换效果代码

1.页面的HTML代码如下: <img id="flag" src="Flags/cn_flag[1].gif" alt="" /> <select name="Country" accesskey="c" id="Country" onchange="change_flag(this);" runat="server" o> <option value="AR>>>详细阅读

本文标题：IE浏览器PNG图片透明效果代码

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

1/2 1