您现在的位置: 365建站网 > 365学习 > IE6 使用png透明图片的方法 [非JS方法]

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

文章来源:365jz.com     点击数:33619    更新时间:2009-12-07 11:40   参与评论

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

如何使用我们前面说的AlphaImageLoader滤镜呢?很简单代码可以这样写(已top区域为例):

1
2
3
4
5
6
7
                        
CSS style="FONT-FAMILY: monospace">.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透明效果又没了!这个是因为在IE6background-image也起作用了,在IE6下就有两个图重叠在一起,另一个属性会把灰色部分显示出来,所以我们必须使用一些小技巧,让浏览器只去读属于自己的样式代码。

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

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (33619人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------