在IE6中使用透明格式的PNG图片

　　作为新生代浏览器的代表，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:

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->img{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

Javascript:

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";

　　这样是不是就可以解决我们所遇到的问题呢？答案并非如此！首先，样式表中的滤镜并非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

如何使用

　　在页面上使用SuperSleight脚本非常简单，你只需要将脚本引用加入到条件注释语句中即可，例如下面的代码仅当浏览器是IE 6（或低于IE 6版本）时脚本才会被引用。

<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><!--[iflteIE6]>
<scripttype="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

http://blog.gulu77.com/?p=147

原文地址：Transparent PNGs in Internet Explorer 6

Tag标签: PNG透明图片