IE6 使用png透明亚游城国际娱乐的方法 [非JS方法]_365体育备用网址官网资讯

IE6 使用png透明亚游城国际娱乐的方法 [非JS方法]

文章来源:365jz.com     点击数:33615    更新时间: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中的搜索部分一样,大家能够自己去测验一下效果,我也都不多说了,简单的写一下只是起个抛砖引玉的效果,如果大家有更好的措施,希望能拿出来一起分享!

如对本文有疑问,请提交到交流网上娱乐网站信誉,广大热心网友会为你解答!! 点击进入网上娱乐网站信誉


公布评论 (33615人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换亚游城国际娱乐
最新评论
------分隔线----------------------------
条评论
Sitemap