网页上PNG透明图片的运用(ie6+滤镜)

PNG ( Portable Network Graphics ) 格式的无损压缩和半透明特性对增强网页效果减少网页体积有着重要的作用，但由于 IE6 不支持 PNG，所以一直未能得到广泛的应用。

虽然 IE7 已经支持 PNG，但目前 IE6 还是主流，怎么样让 IE6 也使用 PNG 呢？网上有相关的介绍，下面我也尝试做一下介绍，希望在表达上能更加通俗易懂…

IE5.5+ 的 AlphaImageLoader 滤镜为 PNG 提供良好的支持，虽然 IE5.0 无法支持，但毕竟是非常非常小的一部分，将来会更小，因此我们不考虑。

滤镜的语法：

    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 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

使用方法：

html>body #png{background:url(images/bg.png) no-repeat;}
 /* FF，Opera */ *html #png{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true,sizingMethod=scale,src="data:images/bg.png");background:none;} /* IE5.5+～IE7+ */

 

Firefox，Opera 支持 PNG ，使用“>”子选择器识别，而IE不识别该选择器（包括IE7）。

虽然 IE7 支持 PNG，但方便起见，还是采用滤镜，使用通配符“*”，该通配符只有 IE 才能识别

不过使用该滤镜，区域内的超链接按钮等将会失效，解决办法？使用“position”使它们浮在上

只有IE6有这个Bug，所以最新的写法这样就可以了

#png{background:url(../images/png32.png) no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true,sizingMethod=scale,src="data:images/png32.png");_background:none}