tempad
ReadyGo!技术成就梦想 >>Java >> JS技巧：在IE浏览器中正确显示PNG透明图片

JS技巧：在IE浏览器中正确显示PNG透明图片

ReadyGo!技术成就梦想 网络搜索 efish 2008-8-30 18:08:08

PNG图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利!

但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。

解决这个的方法是增加javascript。具体方法如下：

把下面的代码放在head区就可以解决问题了。

以下是引用片段：

<script language="javascript"> function correctPNG() { for(var i=0; i<document.images.length; i++) { var img = document.images 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 } } } window.attachEvent("onload", correctPNG); </script>

也可以把这段代码单独加在一张图片上：

以下是引用片段：

<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="male.png",sizingMethod="scale");"></span>

（责任编辑：云子）

责任编辑: efish 参与评论 查找更多：
相关文章
基础知识：Java Web三层架构的配置详解 基础知识：Java Web三层架构的配置详解
Sun预计年底之前将公开全部Java源代码 Sun预计年底之前将公开全部Java源代码
区分Tomcat与Web服务器、应用服务器的关系 区分Tomcat与Web服务器、应用服务器的关系
开源框架Hibernate3的新特性以及发展趋势 开源框架Hibernate3的新特性以及发展趋势
Sun预计在年底之前将公开全部Java源代码 Sun预计在年底之前将公开全部Java源代码
JavaScript实现网页图片等比例缩放效果 JavaScript实现网页图片等比例缩放效果
Linux环境下Java开发 Linux和Windows比较 Linux环境下Java开发 Linux和Windows比较
使用Java程序连接各种数据库的方法介绍 使用Java程序连接各种数据库的方法介绍
Java 安全性综述：安全性的基本要点 Java 安全性综述：安全性的基本要点
新手学堂：几个著名Java开源缓存框架介绍 新手学堂：几个著名Java开源缓存框架介绍
2秒记住本站域名

玩过泡泡龙吗？Readygo?Go! 再加上.Com.Cn的后缀，那就是大名小顶的ReadyGo.com.cn

分类导航
ReadyGo!技术成就梦想