【www.bbyears.com--jquery】
利用css实现
用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")
}
但上面不兼容的浏览器太多了，下面介绍一款利用js实现
代码如下<script language="JavaScript" type="text/JavaScript">
//
function correctPNG()
{
for(var i=0; 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 = "
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src="" + img.src + "", sizingMethod="scale");">"
img.outerHTML = strNewHTML
i = i-1
}
}
}
//addEventListener与attachEvent
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent)
{
var r = elm.attachEvent("on" + evType, fn);
return r;
}
else
{
elm["on" + evType] = fn;
}
}
addEvent(window,"load",correctPNG,false);
//window.attachEvent("onload", correctPNG); 这个只持IE
//]]>
</script>
如果觉得上面单码多了复杂我们直接使用jquery pngFix插件就可快速实现哦。
代码如下
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>