上一篇
下一篇
一个简单JS解决PNG图片在网页上透明问题
作者:天魅 日期:2009-12-08
网页做多了就会郁闷，特别是喜欢做透明的东西，IE不支持：png不透明...找过很多方法，很麻烦，今天不小心发现了这个：不到1K在JS，只要在页面底部加载：
点击下载此文件
还是先看看我做的测试吧，这个PNG都是同一张PNG，只是每个格子的背景不同而以。。。(点击查看例子
程序代码
JS我不了解，虽然经常用，里面具体怎么实现我也不知道，达到我们的效果就好了,解压后里面有个JS，有个clear.gif,GIF只有一个像素点，使用前打开JS修改clear.gif路径。。。接着就可以无耻的使用png了(全站哦)。。。路径不要搞错了哦！
老习惯，看一下别人译的介绍（因为这个是老外写的）
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下透明滤镜重复图片这个功能.
点击下载此文件还是先看看我做的测试吧，这个PNG都是同一张PNG，只是每个格子的背景不同而以。。。(点击查看例子
程序代码<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
JS我不了解，虽然经常用，里面具体怎么实现我也不知道，达到我们的效果就好了,解压后里面有个JS，有个clear.gif,GIF只有一个像素点，使用前打开JS修改clear.gif路径。。。接着就可以无耻的使用png了(全站哦)。。。路径不要搞错了哦！
老习惯，看一下别人译的介绍（因为这个是老外写的）
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下透明滤镜重复图片这个功能.
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: 728
发表评论
