2.在网页中引用,如下:
<!--[if IE 6]>
<script src="http://www.likecs.com/DD_belatedPNG.js" mce_src="http://www.likecs.com/DD_belatedPNG.js"></script>
<script type="text/javascript"> /* EXAMPLE */ DD_belatedPNG.fix(\'.png_bg\'); /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的\'.trans\'*/ </script> <![endif]-->
3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.
使用a:hover请留意
5-25 更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:
<!--[if IE 6]>
<script type="text/javascript" src="http://www.likecs.com/js/DD_belatedPNG.js" ></script>
<script type="text/javascript"> DD_belatedPNG.fix(\'.trans,.box a:hover\'); </script>
<![endif]-->
七.通过 javascript 和 css 滤镜解决 IE 整站 png 背景透明问题
<script type="text/javascript" language="javascript">
function enablePngImages()
{ var imgArr = document.getElementsByTagName("IMG");
for(i=0; i<imgArr.length; i++){
if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1)
{
imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'" + imgArr[i].src + "\', sizingMethod=\'auto\')";
imgArr[i].src = "spacer.gif";
}
if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1)
{
var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);
imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'"+img+"\', sizingMethod=\'crop\')";
imgArr[i].style.backgroundImage = "url(spacer.gif)";
}
}
}
function enableBgPngImages(bgElements)
{
for(i=0; i<bgElements.length; i++)
{
if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1)
{ //alert(bgElements[i]);
var img = bgElements[i].currentStyle.backgroundImage.substring(5,bgElements[i].currentStyle.backgroundImage.length-2);
bgElements[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'"+img+"\', sizingMethod=\'crop\')";
bgElements[i].style.backgroundImage = "url(spacer.gif)";
}
}
}
</script>
<img src="http://www.likecs.com/pngpic.png" alt="" />
<!--[if lt IE 7]>
<script type=\'text/javascript\'>
var bgElements; enablePngImages(); if(bgElements){ enableBgPngImages(bgElements); }
</script>
<![endif]-->
.pngImg {behavior: url(iepngfix.htc);}
以下片段添加至html文件一.IE6使用gif，其他则使用png来解决PNG背景灰