在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中的搜索部分一样,大家可以自己去测试一下效果,我也都不多说了,简单的写一下只是起个抛砖引玉的效果,如果大家有更好的办法,希望能拿出来一起分享!