png图片透明显示

为什么PNG图片却没有GIF和JPG图片的使用来得广泛呢，这个祸因应归属于微软的IE浏览器（Firefox和Opera对PNG支持的比较好，而现在浏览器的主流 IE6却无法很好的支持）。不过微软新出的的IE7可以支持PNG，可以想象在未来的网络世界，PNG图片的重要性将会更加凸显。

但在大家还在绝大多数的使用IE6的时候，我们又怎样在IE6的世界去完美使用PNG图片呢。
IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
但IE5.0无法支持属性，那只有完全绝望了，不过绝望的只是几个，得到是绝大数，我们应该知足，知足才会常乐。

现在我们将通过Hack和AlphaImageLoader滤镜来处理IE6下的PNG背景问题。

先熟悉下滤镜的语法：

Quote:filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

属性：

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。 Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），所有我们可以通过这来定义 Firefox、Opera等浏览器中PNG图片的样式。

如下
html>body #png {background: url(images/bg.png) repeat;}

而对于IE，我们都通过滤镜的方法来定义，或许有人问，IE7不是支持PNG透明图片吗？是的，不错，IE7是支持PNG透明图片，但IE7也支持 AlphaImageLoader滤镜，为了避免使用PNG图片和滤镜冲突造成的不便，我们统一在IE中使用AlphaImageLoader滤镜。我们通过只有IE才识别的通配符（*），来定义IE浏览器中的滤镜。

如下：
* html #png {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg.png");
background:none;
}

这样综合起来的解决方法就是：
html>body #png {background: url(images/bg.png) repeat;}

html #png {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg.png");
background:none;
}

不过需要注意的一个地方：

使用AlphaImageLoader 后该区域的超链接和按钮会失效，解决的方法：

对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面,采用下面的方法让PNG图片透明。