再谈IE6下png不透明问题

   很早之前写过一篇解决ie6下png不透明的方法--《解决PNG图片在IE6下背景不透明的问题》用的滤镜，好处是不用js，坏处是每个png图片都要写一遍滤镜样式而且不能平铺。蓝色上看到的yuanyun翻译的《Unit PNG Fix 》，下次试试这种方法。
-----------------------------------------------------------------------------------------------------
咳! 哎! 咳! 哎!.....    "

你听见了么? 这些都是大家抱怨IE6下不能实现png图片漂亮的明效果的哀叫声,的确是非常无奈.....

不过现在很幸运的是,我们能够让这一切的抱怨都停止.

网络上解决IE6 Png透明解决方案有很多,
例如 IE PNG Fix from TwinHelix, Javascript IE PNG Fix, Transparent PNGs in Internet Explorer 6 from 24 ways.等等.

然而现在,我要和你分享的是 Unit PNG Fix .



因为它的确是太出众了。

1.非常小的javascript文件:1kb!
2.解决因为IE的滤镜属性所带来的影响.
3.无论是img元素或background-image属性,都能有效果.
4.在加载页面之前就能自动运行.或者就一丁点的元素.
5.允许自动高宽.
6.使用起来超级简单.


如何使用:

1). 下载zip
然后,添加下面的代码到你页面的头部.(一定要确保路径的正确)

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

2).添加clear.gif到你的images 文件夹中.在js文件中,修改"var clear="images/clear.gif" 路径,为你存放clear.gif的文件路径.


3). 你的整个项目的png图片都实现了透明效果.的确非常简单吧?就2个步骤,就实现了整个站点所有png的透明效果.


一些注意事项:

Unit PNG Fix能够让 background-repeat在ie6下工作,
不过这种工作方式不是像正常的repeat图片重复的效果,而是采用了拉伸的效果.
但是,仍然是有效果的,所以这也是非常不错的.因为没有任何一个解决方案能够实现ie6下透明滤镜重复图片这个功能.

就这些了,现在你可以开始动手实践了.

阅读英文原文

[本日志由 woniu 于 2011-03-10 11:58 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: ie6图片不透明IE6png不透明IE6hack
相关日志: