[转]PNG should be transparent perfectly in whichever browser

摘自：http://blog.ifcare.net/it/png-should-be-transparent-perfectly-in-whichever-browser.html

PNG格式的图片被越来越多的精工网页作坊们所受用。这源于它一个绝对优越：可透明，而且支持alpha通道（可变透明）。你也许会说，GIF也可以透明的；你也许还会问，什么是alpha通道。我不太喜欢用术语向我的朋友们解释专业名词，大家来看一下两张图片吧：

PNG格式		GIF格式

我画的月亮。

如果我想让天空的背景色与图片分离，通过用网页调用不到的色彩来显示月亮在不同颜色的天空中高悬，那毫无疑问图片中的天空必须是透明的，但我们看到，.gif格式的月亮边缘产生了锯齿，我所设计的那层朦胧光调被无情地压缩掉了，而.png很好的为我保存了下来。

OK,这就是alpha通道。一种包含色彩透明度的图片算法。

我本无心骗你，但我不得不承认，上面的那张PNG月亮是有背景色的，你右键保存一下就知道了，我把背景色与月亮合了层，其实它并不是透明的。

为什么要这么做呢？其实，如果所有人都用Firefox或Opera浏览器，我是无需偷梁换柱的，多此一举的根原，是因为IE6.0以及其之前的 IE浏览器是不支持PNG的透明格式的。也就是说，如果你的浏览器是IE6.0，即使我把图片做成透明，并在网页上配上深色背景，你看到的只能是一个坏了 的鸡蛋黄，而不是美轮美奂的月亮。

IE6.0下的透明PNG效果

很让人庆幸的是，IE7是已经成功的改进了这一bug。但对全球来说，使用IE6的用户超过了50%，对于一个WebDesigner来说，我们必须有相应的措施！那就是：AlphaImageLoader滤镜。

先来熟悉一下AlphaImageLoader滤镜的语法：

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

这样一来，我们就可以通过在CSS中如下书写来调用这张PNG：

#moon {
height: 155px;
width: 155px;
background-repeat: repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src="images/moon.png")
}

这样，我们的IE6就可以完美的显示透明PNG了。可是，当我们用FF打开页面时，图片将不显示了。这是因为，FF浏览器并不支持AlphaImageLoader滤镜。

如果此时你想尝试一下在CSS中的代码后面追加一句“background-image:url(images/moon.png);”的话，再回去看看IE6吧，你把它又给搞晕了：新的背景会覆盖在滤镜的背景之上，导致滤镜显示无效。

这时候就用到IE和FF对CSS读取的区别特性了：

Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），但IE家族识别通配符（*），这是只有IE家族才具备的特性。所有我们可以通过这来定义CSS。代码如下：

写给FF和OPERA的：

html > body #moon {
background-repeat:no-repeat;background-image:url(images/moon.png);
}

写给IE的：

  * #moon {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image, src="images/moon.png")
}

这样一来，我们的任务就完成了。把所有的代码整理起来，最终写在CSS中的就是这样：

#moonpic {
width:155px;
height:155px;
}
html > body #moonpic {
background-image:url(images/moon.png);
background-repeat:no-repeat;
}
* #moonpic {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image, src="images/moon.png")}

需要注意的是：AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：

position:relative;

这样一句代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。