网页制作中,众所周知,IE6的bug及兼容性是最令人头疼的事情,在IE6下让PNG图片透明或者元素背景图片透明很麻烦,最近项目开发过程中,遇到了这样的需求,用原来微软给出的解决方式,给每个用到图片的地方手动加上filter:progid:DXImageTransform.Microsoft.AlphaImageLoader这个属性的办法已经不能完全满足我们的需求,甚至偶尔在某些情况下会失效,经过不断地研究和测试,终于找到了更为方便实用的解决方式,可以让原来麻烦的IE6图片透明问题以及IE6元素加了透明图片链接失效的问题迎刃而解,还望大家多多指教。
工具/原料
1
iepngfix
2
透明图片
方法/步骤
1
按理说一张透明的png图片,在IE8+以及其他浏览器实现透明是很简单的,但是在IE6这种虐死程序员的浏览器上面,也尝试了很多种方式,包括js法,滤镜css法等等总感觉不完美,于是,就有了后来..
3
下载之后里面有Demo,打开即可看到调用方式。基本可解决:1、在页面使用【img】标签使用的png透明图像2、在css中用background加入的png透明背景图片(支持多种版本)3、某些情况下background-image的png透明,需要在当前页添加一个js来解决
4
1、下载之后解压出来会有很多的文件,我们需要用的有其中3个文件:blank.gif,iepngfix.htc 以及 iepngfix_tilebg.js2、可以自己把他们分别放到相对应的css、js和images目录3、添加以下代码:在html中添加样式,注意htc文件的路径,最好使用相对路径,这样一般就不会出错,你也可以把behavior:url(iepngfix.htc)添加到自己的css中4、使用文本编辑器打开iepngfix.htc,把里面的blankImg路径替换成自己的图片路径,如images/blank.gif,视自己的情况而定IEPNGFix.blankImg = 'images/blank.gif';5、把以下这句js调用的代码加入到需要用到透明效果的页面head中去
5
通过以上的步骤,你基本可以实现IE低版本浏览器的png透明效果了,有出现问题,欢迎一起讨论,谢谢啦!