IE6下使png透明的完美解决方式

众所周知,在IE6下面无法使用png透明的效果,虽然IE6的市场份额逐渐下滑,但是在国内依然保持最旺盛的占有率,这一点无法进行忽视。下午的时候Google了一下目前的解决方案,发现IE PNG Fix 2.0 Alpha 4虽然使用非常比较方便而且可以打到预期的效果,但是在加载页面的时候非常的缓慢,这一点是无法容忍的。还有使用滤镜的,但是效果一般,而且没有通用性。

最后在蓝色理想的一个帖子里面有网友提到使用Unit PNG Fix,结果用下来发现效果和速度都非常令人满意,调用方法我简单的说一下吧:

首先在http://labs.unitinteractive.com/unitpngfix.php页面的下面下载unitpngfix.zip文件

接下来将压缩包里面的两个文件:unitpngfix.js和clear.gif拷贝到站点的某个位置,假设将unitpngfix.js拷贝到scripts目录,clear.gif放到images目录,这个时候需要特别注意的是,必须修改unitpngfix.js文件中clear变量的值,也就是clear.gif相对于unitpngfix.js文件的路径,上面的情况就要修改成:

var clear="../images/clear.gif"; //path to clear.gif

最后在页面中进行调用unitpngfix.js文件就可以了。


到这里其实已经看到效果了,不过默认情况下unitpngfix会对页面中所有的元素进行渲染处理,这样的话未免有些影响页面加载的效率,有一种方法就是可以将所要渲染的元素后面使用名为unitPng的style进行限定。

延伸阅读:IE6下使png透明的完美解决方式(续)

OK,Enjoy It!

参考资料:
老问题重提:IE6下png背景透明
ie6处理png透明图片问题
ie6 png透明解决方法简单高效

发表评论

电子邮件地址不会被公开。 必填项已用*标注