在IE7和Firefox下肯定没问题！但是到了IE6下透明部分就变成灰色了。
如何使用我们前面说的AlphaImageLoader滤镜呢？很简单代码可以这样写（已top区域为例）：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
-
|
- .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样式中的话，如下：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
-
|
- .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样式中的话，如下：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
-
|
- .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图片的样式。
代码如下：
- 1
- 2
- 3
- 4
- 5
-
|
- 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浏览器中的滤镜。代码如下：
- 1
- 2
- 3
-
|
- * .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无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。
像本BLOG的header中的搜索部分一样，大家可以自己去测试一下效果，我也都不多说了，简单的写一下只是起个抛砖引玉的效果，如果大家有更好的办法，希望能拿出来一起分享！
