IE6 使用png透明图片的方法 [非JS方法]
在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( |
这样我们在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); |
这样我们在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); |
会发现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( |
这样，咱们要的效果就出来了，IE6、IE7、Firefox、Opera浏览器都能很好的显示这些透明图层，而互不干扰。
注意：AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。
像本BLOG的header中的搜索部分一样，大家可以自己去测试一下效果，我也都不多说了，简单的写一下只是起个抛砖引玉的效果，如果大家有更好的办法，希望能拿出来一起分享！
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
