注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一个人的世界

专注于网站优化与网络发展的研究与探索..

 
 
 

日志

 
 
 
 

解决ie6下png图片透明真正好用的方法—已解决  

2011-04-07 15:48:49|  分类: 网络交流 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
我们都知道png是一种无损压缩的计算机图形格式,在表现力上,特别是Web设计方面,它能够达到其他图形格式所达不到的效果。但IE6对于PNG的不透明度支持的并不好。怎么解决呢?经过模索,终于找到了解决方案,如下:
A:处理图片
1.用GIF代替,但周围会有毛刺出现,可以输出时,把杂边颜色取为背景相近的颜色。
2.用PNG8代替PNG32
B:
1.使用AlphaImageLoader,IE6支持filter,使用下面的CSS代码,可以让IE6支持PNG
  #some-element {
    background: url(image.png);
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
  }
优点:使用简单
缺点:性能损耗很大,AlphaImageLoader会花费很多资源去处理透明图片,使用AlphaImageLoader,IE使用内存会迅速上升。
而且AlphaImageLoader所有处理都在同1个线程中同步进行,所以当AlphaImageLoader多的时候,会阻塞UI的渲染。
使用_filter,IE7也可以识别,其实IE7是可以识别PNG透明图片的,如果在IE7下使用上面代码,IE7不会直接使用图片,而是使用 AlphaImageLoader。
注:个人建议尽量避免使用 AlphaImageLoader
MSDN 说明: http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx
C:用JS代码解决,如下:
1.在http://carrington.googlecode.com/svn/blog/trunk/js/DD_belatedPNG.js 下载DD_belatedPNG.js文件.
2.在网页中引用,有2种调用函数,一种是ie6png.fix(),如上代码.另一种是fix(),
(1).此方法需要应用了透明PNG的CSS选择器.
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript"><!
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');
  /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// -->
<!--[endif]-->
(2).此方法需要在函数内指出css选择器名.
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img,ul,li'); /*加载css选择器名*/
</script>
<![endif]-->
  评论这张
 
阅读(662)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017