如何在页面中使用透明图片和透明背景图片(附demo下载)阿一(杨正祎)

本文将讲解和讨论：如何在页面中使用透明图片效果的几种方法和实现，以及他们的优缺点。

让我们先来说说在网页上经常使用的图片格式——gif、jpg（jpeg）、png，当然用flash也能达到展现图片的效果。至于什么其他的bmp等等，估计没有几个人会用在网页上，所以不在本文的讨论范围之内。

事实证明：gif、png和flash文件在网页上都可以表现出透明效果。而jpg却是无论如何都无法在网页中表现出透明效果（至少我不会，呵呵～）。所以，在本文中，我们只能对jpg图片文件说：“对不起，请您老人家靠边站！”

注：其实背景透明的图片，在保持为jpg文件的时候就已经有了背景颜色，而不是在浏览器对jpg文件渲染的时候出现了什么问题。所以，在网页上使用背景透明的jpg基本上是不太可能了。

所以，要想使用背景透明的图片，只能寄希望在gif和png，以及flash上面了。

在IE6一家独大、flash还没有大行其道的年代里，要想使用背景透明的图片效果，gif几乎是唯一的选择。即便是现在，使用gif达到透明效果，如果在要求不是很高的前提下，依然是个不错的选择。原因很简单——简单、方便。

但是，gif透明背景图片也有个致命的缺点——图片边框有白色的(谢谢10楼zjfeiye的补充)“毛刺”。所以如果你的图片所在的网页区域，网页背景颜色不是白色的话，那就会非常“惨不忍睹”。

作为新生力量的png图片格式，背景透明这样的小把戏，自然不再话下。所以在IE7以上的IE浏览器中，以及FireFox、Opera、Safari浏览器都能出色的完成任务，谷歌浏览器中，自然也是没有任何问题。可问题就在IE6浏览器中，在IE6这群遗老遗少中，完全不买png的帐，无论你是怎么的好，怎么的强，在我IE6里，就是不行。所以——png背景透明的图片，在IE6会失去透明背景，而已非常丑陋的一陀灰色代替。

对于用flash来实现图片背景透明效果，虽然浏览器的兼容性上没有什么问题。但是flash的缺点也是一大把——先不说需要装插件，就算是维护和修改成本也的让人衡量一下。当然，如果你们手头有flash的大量资源，这也自当别论。所以这里flash不做重点讨论。只给一段代码，作用是设置flash透明背景——

如果你要使用背景透明图片的地方，正巧是网页中的地方背景颜色是白色的，或者你不介意那些小小的“毛刺”的话，纳闷完全可以使用gif背景透明图片。

如果，你能保证你的用户，根本不会使用那些老掉牙的IE6一下版本的浏览器的话，那么你完全可以选用png背景透明图片。

如果，你能保证你的用户，浏览器都安装了flash显示插件，并且手头有大量的会flash的人力资源来制作和维护flash图片的话，那么你可以使用flash背景透明图片。

如果，恰巧上面的三种情况，都不适合你的话，那么恐怕你需要继续向下阅读了。

想想一下：如果我们在IE6中使用gif，而在IE7或者其他浏览器中使用png。那么，就可以达到在任何浏览器下都是透明，而在IE6中“稍有毛刺”这样的较为理想的效果。

这时我们想到了csshack。在要显示图片的地方，我们不使用img标签，而使用div，然后对div设置背景图片，然后大小设置和图片一样大小。这样，我们就可以使用csshack了。方法也很简单——

如果你洁癖到连IE6中的那些“毛刺”也无法忍受的话。那我们只能拿出终极解决方案了——其实，我们可以通过一些技巧，让IE6也能支持背景透明的PNG图片。这样，png背景透明的唯一缺点——不支持IE6也便克服了。

当然，整个解决方案也有其缺点——需要多引用1-2个文件（iepngfix.htc和iepngfix_tilebg.js文件）。所以，最终使用何种方案还需要根据自己的要求而定。