转http://runbing.me/archives/dd_belated-png-ie6-png.html?replytocom=6592
一直以来,让前端设计师比较头疼的一个问题就是IE6对Alpha透明PNG的处理方式,如下图所示,在IE6下,PNG图片的透明部分,被无耻的蒙上一片灰色,这是无法让人容忍的!每当制作页面的时候都对PNG图片的选择倍加纠结,甚至有时候也不得不用GIF去替代PNG,为的是那些还占有大份额“忠于”IE6浏览器的用户!
这问题也是老生常谈了,网络上也有很多解决方法,但是都不算完美。直到昨天请教公司明哥才知道这样一个接近完美的方法——DD_belatedPNG!它使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,与其他方法区别最大的一个特性就是能支持background-position和background-repeat属性。
DD_belatedPNG的使用方法很简单,首先去官官网或::点击这里::下载JS文件,然后在页面上插入如下代码(注意JS的路径哦),然后在“DD_belatedPNG.fix(‘有PNG图片的类名或标签’);”汉字部分填上有半透明PNG图片的CSS类名或IMG标签即可。
1 2 3 4 5 6 | |
比如有如下这样一个页面,为类名为“test”的DIV标签设置了一个“test.png”的图片当背景,并且插入了一个“test.png”的图片文件,那么只需要在如上所示的JS片段中改写“DD_belatedPNG.fix(‘.test,img’);”就大功告成了!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | |
当然需要注意的是DD_belatedPNG虽然堪称完美却也有不足的地方,如对不支持<tr>和<td>标签、不支持background-position:fixed等,官方页面上有详细说明,不过能做到这种程度也算很了不起了,总算找到一个较为完美给劲儿的解决方案,Enjoy it吧!