既是安安

蝴蝶飞不过沧海,谁忍心责怪?

IE6.0下PNG透明

在IE6.0下PNG无法透明也是个被人嚼乱了的话题,大致的解决方案有HTC、JavaScript和使用GIF或者是PNG8来替换目标图片这么几种。

1,HTC的方式

先获得HTC和JS文件(点这里下载)将提供的ZIP解压,然后把iepngfix.htc和iepngfix_tilebg.js文件放在网站根目录(当然,这并非必然)下。

在你的Html页面中引入刚刚的那个JS文件:<script type="text/javascript" src="iepngfix_tilebg.js"></script>

然后在你的Css页面加入如下代码:img, div, input { behavior: url("iepngfix.htc") }

(请根据你的文件所在目录稍作修改)

在你下载的ZIP中有Example,你只需要将浏览器的JavaScript禁用与否就可以再右边看到区别了(PS:请不要拿除了IE6.0以外的其他浏览器来开玩笑!),这里就不在提供DEMO了。

HTC方式的缺陷:对前端性能影响较大。

2,JavaScript的方式

这里又可以分为两种(可能有更多种,只是我不知道而已)

(1)Unit PNG Fix插件(点击这里下载),它的工作原理是利用一个透明的gif图片来解决。

将把clear.gif文件拷贝到你的目录中,并在unitpngfix.js指定clear.gif的地址。

然后在你的页面中添加如下代码:

  1. <!--[if lt IE 7]>
  2. <script type="text/javascript" src="unitpngfix.js"></script> 
  3. < ![endif]-->

Unit PNG Fix插件的缺陷:对作为背景图的PNG支持的不是蛮好。

(2)DD_belatedPNG插件(点击这里下载),它的工作是利用VML技术来实现透明色。

同样的,在你的页面中引入此JS文件:

  1. <!--[if lt IE 7]>
  2. <script type="text/javascript" src="DD_belatedPNG.js"></script>
  3. <script type="text/javascript">
  4. DD_belatedPNG.fix('#id, .classname');//在这里添加你要处理的对象的类名或者是ID,当然你也可以不必这么麻烦,直接使用DD_belatedPNG.fix('img,a,div,span, li') 这种大的css标签也是不违法的。
  5. </script>
  6. < ![endif]-->

PS:VML的全称是Vector Markup Language(矢量可标记语言),但是只有IE支持它,而在Firefox中类似的技术是SVG(可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。),当然IE是不支持SVG的(话说安装插件才可以,比如说Adobe SVG Viewer)。

3,GIF或者是PNG8

这个就不要说了吧?你们都懂的。

[既是安安]博客 季氏安安

本文作者:季氏安安[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接,谢谢。)

原文链接:http://www.jsann.com/post/PNG_transparency_in_IE6_under.html

网站分类
Tags列表
最近发表
最新留言
友情链接
站点统计

Top