作为新生代浏览器的代表,Firefox和Safari(译者:MacOS系统下的主打浏览器)都完全支持带有全alpha通道透明度的PNG图片,这已经过去好些年了。随着技术的深入,IE5.5和IE6已经可以支持这种PNG图片了,但是效果并不是很好,而且使用起来也很麻烦。在过去的一年里,IE7(译者:目前最新版本是IE8)逐渐赢得了大量用户的青睐,从而使得这种带有全alpha通道透明度的PNG图片的应用变得越来越触手可得了。
不过仍然有许多IE6用户不能享有这种技术,我们当然不能把他们落在这个寒冷的圣诞夜里,所以,在本文中,我们就来看看我们能为这些IE6用户做些什么,而使他们也可以很好地利用这种“透明”技术的优势来服务广大网民。
那么什么是alpha通道透明度呢?
请把目光转到过去的圣诞夜,那个谦卑的GIF!GIF格式的图片支持透明,但仅限于纯色,它要么被设置为全透明,要么被设置为单一的颜色。在GIF中,仅当你给一个像素指定一个特定的颜色时透明才有效(译者:GIF图片对透明度的支持是非常有限的,它不能做到类似于PNG的那种半透明效果)。
相反,PNG格式的图片则有些不同。在PNG图片中,你除了可以给像素选择颜色外,还可以给每个像素设定独立的通道信息,通道可以用来说明PNG图片是如何处理透明的。Alpha通道就可以实现这一点,包括完全透明和完全不透明。
PNG图片的这个特性使得设计师们可以将图片设计出更多的效果,如给图片添加“光环效果”,这个在GIF图片中是不能做到的。如果一个网站有多个不同的颜色设计方案,并且需要为每一种图形根据不同的颜色设计多个不同的版本的话,那么你将会看到PNG图片所带来的好处。
更多的创作自由能让设计师们创作出更加漂亮的网站,还有什么会比这更加让人觉得有趣呢?
IE浏览器所面临的问题
直到IE7的出现,IE一直没能很好地支持带有全alpha通道透明度的PNG图片(译者:事实上在IE8中已经支持得很好了)。不过从IE5.5开始,出现了一个被称之为AlphaImageLoader的滤镜属性,它可以被直接应用到CSS样式表中(包括在内联样式和背景图片),同时也可以通过javascript脚本应用到CSS样式表中。如下面的代码:
CSS:
filter : progid: DXImageTransform.Microsoft.AlphaImageLoader(...) ;
}
Javascript:
这样是不是就可以解决我们所遇到的问题呢?答案并非如此!首先,样式表中的滤镜并非W3C标准,它是由Microsoft所推出的一个扩展样式属性,在除IE之外的浏览器中可能并不被支持。
其次,AlphaImageLoader本身也不会对页面上的PNG图片添加全透明支持,当它被应用到页面上包含有PNG图片的元素时,它会重新在该元素所在的地方进行渲染并显示出新的效果。AlphaIMageLoader的工作原理就是这样的,听起来是不是有点不可思议啊?不过总体上来说,AlphaImageLoader滤镜是可以支持带有全alpha通道透明度的PNG图片的。
存在的问题
IE5.5和IE6都能够支持PNG透明图片,但是存在一些问题。
positioned和repeated样式属性不能被应用到背景图片中
AlphaImageLoader是可以被应用到背景图片中,但仅限于一些基本的应用。假如我们需要让背景图片平铺(background-repeat),或者让背景图片固定位置(background-position),AlphaImageLoader可能就无能为力了。在AlphaImageLoader中有一个SizingMethod方法可以用来对图片进行裁剪和修整,如果需要的话我们可以使用该方法对图片进行一些调整。这个似乎没有太大的用途,但总会有一点点用的。
延迟加载和资源使用
AlphaImageLoader的加载速度通常会比较缓慢,而且在加载时会比正常图片消耗掉更多的资源。通常,你可能需要在页面上添加上千张GIF或JPEG图片才能感觉到浏览器在加载时有明显的变化,但在页面上加入少许几张带有alpha通道的PNG图片后,AlphaImageLoader滤镜的使用则会使得浏览器的加载速度变得非常缓慢了。
而另一个明显的效果是,页面上使用的AlphaImageLoader实例越多,透明PNG图片被加载的时间就越长。在滤镜效果被逐个应用到PNG图片之前,用户看到的PNG图片就是一个黑色或灰色的方块。
加载速度太慢的主要原因取决于图片的数量和图片本身的大小。当使用一到两个AlphaImageLoader时你可能并不会感觉到有什么变化,当数量增加到5个或者6个时你可能就要注意了。然后你需要反复地进行测试。
链接不可用,表单无法获取焦点
这可是个大问题!AlphaImageLoader本身存在一个bug(或者说是一个缺陷),当一个PNG图片被作为背景图片使用时,链接和表单之间的交互有时候会失效。可能你会觉得这是z-index所引起的,但我不这样认为。因为当出现这种情况时,应用到页面上的AlphaImageLoader根本就没有正常工作。
通常我们可以通过在链接或表单元素上使用position:relative;样式来解决这个问题。不过这个方法也不一定能完全奏效,有时候你不得不为了解决这个问题而重新开始你的整个设计。
回避危险区域
老实说这也许是一个非常不好的消息。如何你设计了一个网站,该设计已经被客户确认了,于是你开始动手创建这个网站,最后却发现搜索区域在IE6上死活都无法获得焦点。这绝对是一个噩梦!虽然这种事情不太容易发生,但也总不能避免吧,我就遇到过这样的事情,如果是你你会怎么解决呢?
这里有一些解决方法:
1. 隔离导致问题的PNG图片。逐步注释掉页面上的PNG图片,然后重新测试。通常这都是最近的PNG图片所引起的,因此你可以从页面上的第一个PNG图片开始进行隔离并逐步测试,直到那个区域可以获得焦点并且能被点击。
2. 侥幸一点的方法,不过这要取决于你网站的设计。我们可以采用一些方法例如用GIF或JPEG图片来替换出问题的PNG图片,条件注释语句可以做到这一点,不过它只能在IE7以前的版本中使用。
你想说这是高深的技术?呵呵,我看你已经开始上路了。
应用AlphaImageLoader滤镜
因为filter属性是一个无效的CSS样式,所以在IE5.5和IE6中最安全的方法是有选择地通过javascript来使用它。这样,你就可以确保默认情况下在那些支持滤镜样式和透明PNG图片的浏览器中使用标准CSS样式,然后有选择性地去修补那些不支持滤镜样式和透明PNG图片的浏览器,让它们也可以支持透明PNG图片。
几年前,Aaron Boodman写了一个sleight脚本来实现这个功能。但是sleight只适合于被使用在页面上的图片,对于那些在css中使用的背景图片则无能为力。于是,在Aaron努力的基础上,我改进了sleight并写了一个名叫bgsleight的脚本来处理背景图片的问题。那是2003年的事儿了,在这几年里我又做了许多的改进来解决sleight和bgsleight的兼容性。然而,随着alpha通道PNG图片的使用越来越普遍,是时候推出一个全新的版本了。
引入SuperSleight
SuperSleight加入了许多新的非常有用的功能,这些功能都来源于我们平常对PNG图片的使用。
. 支持所有的inline和background images,取代并整合了sleight和bgsleight的功能。
. 如果form fields和links没有设置position样式则会自动给它加上position:relative样式(该功能可以取消)。
. 可以支持整个document文档或其中的某一部分,如果你能确定哪部分包含了PNG图片的话,该功能将提高整个程序运行的效率。
. 检测背景图片设置为no-repeat,并且设置scaleMode为crop而不是scale。
. 能够被页面上的其它javascript调用——支持通过Ajax动态加载的对象。
如何使用
在页面上使用SuperSleight脚本非常简单,你只需要将脚本引用加入到条件注释语句中即可,例如下面的代码仅当浏览器是IE 6(或低于IE 6版本)时脚本才会被引用。
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif] -->
脚本提供了一个透明的GIF图片,它使用AlphaImageLoaded滤镜在PNG图片载入页面之前将它替换为这个透明的GIF图片。你可以在脚本文件的顶部修改该图片的引用路径,同时你还可以选择打开或关闭添加position:relative到links和fields的功能。
该脚本从文件底部的supersleight.init()函数开始执行,你可以调用supersleight.limitTo()方法通过传入页面元素的ID来实现页面局部的图片处理。一切就是这么简单。
译者:一些相关资源。
http://www.diybl.com/course/1_web/javascript/jsjs/20090831/173176.html