PNG格式图片通常被我们当做素材来使用,在设计过程中,不可避免的要搜索相关文件,如果是JPG格式文件,抠图就在所难免,费时费力,gif格式虽然具有透明性,但其只是对其中一种或几种颜色设置为完全透明,并没有考虑对周围颜色的影响,所以此时PNG格式文件就成了我们的不二之选。我们经常在网页中看到整个页面使用同一个PNG图片做背景,按钮、导航条等全做在一张图片上,其实就是这个道理,究其缘由无非就是PNG图片在下载过程中占带宽较小,而且颜色逼真,下载一次可重复使用。
但遗憾的是,早期的浏览器IE6对PNG图片支持的并不理性,尤其是透明的地方,全部以灰色代替,对于很多还在使用IE6浏览器的访客造成了很多的不便,因此,使用一些技术手段解决这个问题是很多网站开发真需要攻克的一个难关,以下的JavaScript代码是本人自己撰写的,几乎在本人所有使用PNG图片的网站中使用,效果明显。
代码部分:
-----------
function GoToPng(){
if(navigator.appName=="Microsoft Internet Explorer"&&navigator.appVersion.indexOf("MSIE 6")>-1){ //判断是否是IE6
var t1,i1,t3,t2,fi1
var d1=document
for(var pngi=0;pngi<=d1.images.length-1;pngi++){ //页面中所有图片循环
var img = d1.images[pngi] //获得图片对象
t2=img.src.toLowerCase() //将图片文件名小写
t2=t2.substring(t2.length-4) //取文件名后4个字符,用来判断是否是PNG图片
if(t2==".png"){ //判断文件是否是PNG图片
t1=img.style.cssText
i1=t1.indexOf("%")
if(i1>-1){
t3="scale"
}else{
t3="image"
}
t2="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "',sizingMethod='" + t3 + "')" //PNG图片对应的IE6专用过滤样式代码
if(t1!=""){
t2=t1+";"+t2
}
img.style.cssText=t2 //为该图片设置透明样式
img.src="images/noimage.gif" //文件用一个透明的文件代替
}
}
}
}
----------
注意事项:
1.该函数可以写在通用JavaScript文件里,如果网页中使用了PNG图片,网页代码的最后部分,调用一下该函数。
2.在网站的images文件夹里面保存一个透明的Gif文件,尺寸不限,亦可在其他地方保存该文件,只要将函数中img.src="images/noimage.gif"这行代码中改成您保存的地方。
3.在非IE6浏览器上,该函数不会运行。