都知道在ie6里用图片的时候得处理png透明,因为ie6不支持png透明,而jpg不支持透明,gif呢质量又不好.当然咱们有解决的办法.网上常有的有多很,但大多归纳于用css和js来实现,css是用滤镜处理的,对一些背景透明png和图上有连接不能很好的使用.一般都是用js处理.下面学习吧总结下用js处理ie透明png图片的方法:

先把需要处理透明的图片的窗口加个class,当然这里说的是用background做的,如 <div class="xuexb ie6png"> 在HTML里引用js,如:(当然这个js是基于jquery的)

<!--[if IE 6]>
<script src="/inc/png.js"></script>
<script>
DD_belatedPNG.fix('#id ie6png');//这里使用ie可以提高效率
</script>
<![endif]-->

这样操作后,你会发现png居然透明了.但是后来网速网站才发现,ie6加刚加载的时候图片是呈灰色状,等加载到这个js的时候且用 DD_belatedPNG.fix处理后才会透明,非常的不友好.于是又改代码,定义个样式如:#id .ie6png { _visibility: hidden; },这里是让在ie6中默认是不显示的,然后再改js代码:

<!--[if IE 6]>
<script src="/inc/png.js"></script>
<script>
$(function(){
 DD_belatedPNG.fix('#id .ie6png');
 $("#id .ie6png").css("visibility","visible");
})
</script>
<![endif]-->

这样说明用css先让ie6隐藏,等网站加载完毕后,执行DD_belatedPNG.fix处理透明,再把visibility设置为visible可见,哈哈,解决加载的时候出现灰色背景;后来又遇到个问题,发现用这样的方法加载大图片的时候,会先把图片加载到页面的左上角,等处理完fix才瞬间转移回来,可以给$("#id .ie6png").css("visibility","visible");设置setTimeout来兼容.当然后来研究大网站代码才发现有这么一个秘密...

学习吧总结IE6处理Png图片的技巧:

1.如果背景是白色,那么请给这个png图片设置为白色.如图,黑色的为透明的,而那么按钮 因用的地方背景为白色所以让按钮底色为白色,这样就不用处理透明了;如图:

2.把一些质量要求不高的图,去掉阴影和一些比较圆滑的地方后保存为png8位的,然后在css里写 background:url(/images/1.png); _background:url(/images/1-ie6.png); 而这个ie6的png图片都和1.png一样,只是没有一些特效了, IE6中可以正常的使用png 8位的图片;(如果为字可以适当的加1个像素的该图出现在哪的背景色的边,这样在IE6看不出什么锯齿!)如图:

3,而一些要求高质量的可以使用css+js延迟来完成兼容.

经过上面的3点,一般的站的png透明都能解决.

发表于 2013年03月14日 16:13:41 ,添加在分类 前端技术 下 ,最后修改于 2017年04月19日 01:11:48