js png透明问题 我网上找了个png透明。。 js插件 但图片是静态问题不打 碰到 鼠标经过 图片变小获得改变透明度 js插件 也没效果了 这个时候应该怎么解决 img src= 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 png原本就支持透明【ie6除外,需要滤镜】,不遭到你说的变小透明是干嘛 http://www.w3cfuns.com/forum.php?mod=viewthread&tid=297 PNG(Portable Network Graphics)格式图片可以表现更为绚丽多彩的颜色,常见的一些具有矢量效果的图片、图标都采用png格式,但是具有透明背景的png格式图片在IE6中却不是背景透明的,透明背景部分会显示出#DBEAED的淡灰色,表现效果很糟糕,为了使用透明背景图片只有采用gif格式了,但是gif格式会出现明显的锯齿效果,所以只有设法修复IE6的这个问题。解决的办法就是使用IE的Microsoft.AlphaImageLoader滤镜。 方法一: IE6与原本支持png8的索引色透明度,但不支持png或8位以上的 alpha 透明度。对于非动画的GIF可以使用PNG8,同时体积也会更小。但这种办法是以牺牲图片质量为代价的,而且实施也不太容易!-------------------------------------------------------------------------------- 方法二: 如果希望使用png格式图片作为DOM元素的背景,那么就可以使用滤镜来加载png图片.png{ background: url(/angel.png) no-repeat !important; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/angel.png",sizingMethod='scale'); _background:none; width:100px; height:100px;}HTML代码:<div class="png"> 背景PNG透明<div>--------------------------------------------------------------------------------设置滤镜作用的对象的图片在对象容器边界内的显示方式。 可取值包含如下几个:crop:剪切图片以适应对象尺寸(如果图片比对象尺寸大)。image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale:缩放图片以适应对象的尺寸边界。可平铺以上代码使用了一些IE的Hack,IE7,IE8,Firefox直接应用_background,IE6则会应用filter! 方法三: 如果png格式的图片不是用来做元素背景,而是直接引入的img图像,那么方法二就无法应用了,那么此时可以把此img标签的src属性替换为一张空的透明gif图像,然后再按照方法二把png图片加载为元素的背景就可以了。首先要准备一张空白透明的gif图片,一般命名为blank.gif或space.gif或transparent.gif,然后就可以替换png图像了。但是手工替换不太现实,最好一段代码就解决问题:<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>替换pngtitle><style type="text/css">.mypng img {azimuth: expression( 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 = "transparent.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);}style>head><body>换成你的png图片<div class="mypng"><img src="icon_face_07.png" width="30" height="30" /><img src="icon_face_10.png" width="30" height="30" /><img src="icon_face_08.png" width="30" height="30" /><div><body><html>--------------------------------------------------------------------------------以上代码使用了仅IE支持的CSS表达式完成替换与设置滤镜背景的工作。同样的工作也可以由Javascript来完成:--------------------------------------------------------------------------------<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>自动替换png图片</title><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; } } } }if(window.attachEvent) window.attachEvent("onload", correctPNG);</script><style type="text/css"><!--body {background-color: #9999CC;}--></style></head><body>把图片换成你自己的图片<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 --><img src="img/icon_face_05.png" width="30" height="30" /><img src="img/menu_title_over.png" width="130" height="36" /></body></html> --------------------------------------------------------------------------------以上代码采用Javascript遍历页面中的png图像,并实现替换功能!方法四: 在页面上注入Javascript代码并执行还是不太方便,因此可以把这些Javascript代码封装为htc,并设定浏览器的缺省行为即可实现同样的功能,常用的htc即iepngfix.htc–[if lte IE 6]><style type="text/css"> img{behavior: url(iepngfix.htc)}style> [endif]–>以上代码就使用IE的缺省行为behavior属性导入了png图像处理代码iepngfix.htc,不过要修改iepngfix.htc中blank.gif的路径,使其指向正确的空白透明图片!下载iepngfix.htchttp://www.twinhelix.com/css/iepngfix/iepngfix.zipiepngfix的缺陷:1、使用PNG透明背景可能导致该元素内部链接无法点击,尤其在链接具有float属性的时候,如:存在于一个浮动列表中的链接。推荐解决方法:使用display:inline代替float来实现块级元素的的横向排列。2、img标签的插入的透明PNG图象无法使用右键保存,“另存为”只能取到覆盖在上面的blank.gif,因为原始图片已经被替换为空白图片了!3、作为背景的PNG图象无法被平铺,无法被定位,即background-repeat默认为no-repeat,而background-position彻底失效。面对这样的bug,只希望IE6早日走进坟墓成为历史!本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/boral_li/archive/2009/05/03/4144365.aspx 急急急++++++ 高手进?? 请问我这个javascript正则表达式哪里写错了,谁帮我改改?求大神指教 关于正则表达式的正向后瞻 哭求~~高手来啊~ 帮忙下 如何设置<select>的选中项??? mouseover与mouseout的问题,HELP 请问xmlhttp对象和xmldom对象在使用上有什么区别 在vbscript中的Window_OnLoad()好象是窗口启动时自动执行,那么在Javascript中是怎么实现的,谢谢! !!!一百分求解!!! ATL开发及javascrip jQuery的animate方法,貌似很卡啊。 jquery1.8跟1.3的兼容问题
方法二: 如果希望使用png格式图片作为DOM元素的背景,那么就可以使用滤镜来加载png图片.png{ background: url(/angel.png) no-repeat !important; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/angel.png",sizingMethod='scale'); _background:none; width:100px; height:100px;}HTML代码:<div class="png"> 背景PNG透明<div>--------------------------------------------------------------------------------设置滤镜作用的对象的图片在对象容器边界内的显示方式。 可取值包含如下几个:crop:剪切图片以适应对象尺寸(如果图片比对象尺寸大)。image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale:缩放图片以适应对象的尺寸边界。可平铺以上代码使用了一些IE的Hack,IE7,IE8,Firefox直接应用_background,IE6则会应用filter! 方法三: 如果png格式的图片不是用来做元素背景,而是直接引入的img图像,那么方法二就无法应用了,那么此时可以把此img标签的src属性替换为一张空的透明gif图像,然后再按照方法二把png图片加载为元素的背景就可以了。首先要准备一张空白透明的gif图片,一般命名为blank.gif或space.gif或transparent.gif,然后就可以替换png图像了。但是手工替换不太现实,最好一段代码就解决问题:<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>替换pngtitle>
<style type="text/css">
.mypng img {
azimuth: expression(
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 = "transparent.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);
}style>
head><body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
<div>
<body>
<html>--------------------------------------------------------------------------------
以上代码使用了仅IE支持的CSS表达式完成替换与设置滤镜背景的工作。同样的工作也可以由Javascript来完成:--------------------------------------------------------------------------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自动替换png图片</title>
<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;
}
}
}
}
if(window.attachEvent)
window.attachEvent("onload", correctPNG);
</script>
<style type="text/css">
<!--
body {
background-color: #9999CC;
}
-->
</style></head><body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html> --------------------------------------------------------------------------------
以上代码采用Javascript遍历页面中的png图像,并实现替换功能!方法四: 在页面上注入Javascript代码并执行还是不太方便,因此可以把这些Javascript代码封装为htc,并设定浏览器的缺省行为即可实现同样的功能,常用的htc即iepngfix.htc–[if lte IE 6]>
<style type="text/css">
img{behavior: url(iepngfix.htc)}
style>
[endif]–>
以上代码就使用IE的缺省行为behavior属性导入了png图像处理代码iepngfix.htc,不过要修改iepngfix.htc中blank.gif的路径,使其指向正确的空白透明图片!下载iepngfix.htchttp://www.twinhelix.com/css/iepngfix/iepngfix.zipiepngfix的缺陷:1、使用PNG透明背景可能导致该元素内部链接无法点击,尤其在链接具有float属性的时候,如:存在于一个浮动列表中的链接。推荐解决方法:使用display:inline代替float来实现块级元素的的横向排列。2、img标签的插入的透明PNG图象无法使用右键保存,“另存为”只能取到覆盖在上面的blank.gif,因为原始图片已经被替换为空白图片了!3、作为背景的PNG图象无法被平铺,无法被定位,即background-repeat默认为no-repeat,而background-position彻底失效。面对这样的bug,只希望IE6早日走进坟墓成为历史!本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/boral_li/archive/2009/05/03/4144365.aspx