PNG图片在IE6下透明度解决方法

  PNG格式图片因其高保真性、透明性及文件大小较小等特性,被广泛应用于网页设计、平面设计中。网络通讯中因受带宽制约,在保证图片清晰、逼真的前提下,网页中不可能大范围的使用文件较大的bmp、jpg格式文件,gif格式文件虽然文件较小,但其颜色失色严重,不尽人意,所以PNG格式文件自诞生之日起就大行其道。

  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浏览器上,该函数不会运行。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值