IE6 使用png透明图片的方法 [非JS方法]

在IE7和Firefox下肯定没问题！但是到了IE6下透明部分就变成灰色了。

如何使用我们前面说的AlphaImageLoader滤镜呢？很简单代码可以这样写（以top区域为例）：

.header .top{
width:1000px;
height:116px;
margin-left:auto;
margin-right:auto;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src="/wp-content/themes/xilin/images/topbg.png");
}

这样我们在IE6下看效果的时候PNG的透明层就起作用了。但是当我们返回Firefox的时候，PNG的图没了？别急这是因为 AlphaImageLoader滤镜是IE系列浏览器的专属标签，Firefox当然不支持了。必须使用background-image属性在 Firefox下才起作用：

如果我们这样吧background-image加入到CSS样式中的话，如下：

.header .top{
width:1000px;
height:116px;
margin-left:auto;
margin-right:auto;
background-image:url(/wp-content/themes/xilin/images/topbg.png);
/* Firefox只支持这个方式 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src="/wp-content/themes/xilin/images/topbg.png");
}

这样我们在IE6 下看效果的时候PNG的透明层就起作用了。但是当我们返回Firefox 的 时候，PNG的图没了？别急这是因为AlphaImageLoader滤镜 是IE系列浏览器的专属标签，Firefox 当 然不支持了。必须使用background-image 属性在Firefox 下才 起作用：

如果我们这样吧background-image 加入到CSS 样式中的话， 如下：

.header .top{
width:1000px;
height:116px;
margin-left:auto;
margin-right:auto;
background-image:url(/wp-content/themes/xilin/images/topbg.png);
/* Firefox只支持这个方式 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src="/wp-content/themes/xilin/images/topbg.png");
}

会发现IE6 下的PNG 透明效果又没了！这个是因为在IE6 下background-image 也 起作用了，在IE6 下就有两个图重叠在一起，另一个属性会把灰色部分显示出来，所以我们必须使用一些小技巧，让浏览器 只去读属于自己的样式代码。

我们知道Firefox 、Opera 等完全支持PNG 透 明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样 式。

代码如下：

html > body .top{
/* for Firefox */
background-image:url(/wp-content/themes/xilin/images/topbg.png);
background-repeat: no-repeat;background-position: center center;
}

同时，我们通过只有IE才识别的通配符（∗），来定义IE浏览器中的滤镜。代码如下：

* .top{
/* for IE6 */
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src="/wp-content/themes/xilin/images/topbg.png");
/* 这里在样式前加下划线是为了防止IE7浏览器来读取这个样式 */
}

这样，咱们要的效果就出来了，IE6、IE7、Firefox、Opera浏览器都能很好的显示这些透明图层，而互不干扰。

注意 ： AlphaImageLoader 滤镜 会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative; 这 样条代码，使其相对浮动。AlphaImageLoader 无法设置背景的重复，所以对图片的切图精度会有很高的精确 度要求。