ie6下png图片做背景的循环及定位问题

wumei2009-07-29 21:53:16

　　曾经在《关于ie中用png图片做背景的众多问题的解决》文章里讲过用滤镜来解决背景透明的问题，但没有解决循环和定位。正常情况下，ie6不支持png图片做背景，一是不透明，二是不能定位，三是不能循环。今天群里的月下同志的文章参考下我终于解决了这个问题。

1、下载iepngfix.zip， 点击下载此文件

　　其中有三个文件：iepngfix.htc、iepngfix_tilebg.js、blank.gif，将这几个文件解压出来放到所需要使用png做为CSS背景的网站的根目录下。

2.、加入behavior: url("iepngfix.htc");　这个是解决png透明问题

　　用png做背景时，在CSS样式的最后定义一个behaviro属性。

#login_main {
   background:url(../img/main.png) repeat 20% 50%;
   width:739px;
   height:366px;
   top:12%;
   left:20%;
   position:absolute;
   behavior: url("iepngfix.htc");
}

　　此时要注意url内的路径是相对于index.htm来说的，而不是相对于定义其样式的css文件。

3、在htm文件中引入上文中提到的第二个javascript文件。这个是解决png的循环及定位问题。

<script language="javascript" src="iepngfix_tilebg.js"></script>

　　将其插入到<head></head>中

优化：

一、当需要用到的png图片比较多时IE6反应会迟钝，因为IE6每次加载需要透明的PNG时都会进行一系列的运算，将png中的alpha透明部分用blank.gif空白位图代替，可以想象这样的计算规模有多庞大。没办法，这是无法避免的，Vista 和IE7早就出来了，还有非常卓越的FF可供选择，使用IE6的客户所占的份额总会渐渐下降的。观察一下，此时使用IE7打开刚刚htm可以发现，本来非常完美而且不需要做任何改动的页面在IE7下也加载得特别慢，看来behaviro属性也影响到了IE7，让IE7也做了繁重的无用功。

#login_main {
   background:url(../img/main.png) repeat 20% 50%;
   width:739px;
   height:366px;
   top:12%;
   left:20%;
   position:absolute;
     _behavior: url("iepngfix.htc");
}

　　此时我们的目标是将IE7解放出来，查阅各种浏览器的hack，发现只有IE6在CSS中能够认识下划线“_”，所以我们在刚刚的CSS样式中的behaviro前加上一个下划线。而这个下划线无论是FF或者IE7都是不会去解析的，这样IE7就会忽略这个CSS属性，既而解放了IE7。

二、既然此次处理的目标就是IE6浏览器，所以在首页中的JS加载语句也可以加上一个小小的改动，加上“”标签，既而只针对IE6，而解放了其他浏览器，使它们在页面加载时就忽略iepngfix_tilebg.js这个文件，提高效率。而可怜的IE6，让它接受暴风骤雨般的CPU消耗吧，没办法，爱莫能助了。

上一篇：如何用photoshop设计绿色时尚的Web版面
下一篇：25个杰出的杂志风格网站设计

发表看法5

>> more 看看其他人的看法
我们群的月下吗？简直是误人子弟啊！悲哀
1 夫子 2009-9-8 22:09 Tuesday
}
为什么这么说呢？我试验了，都很好用的。
2 wumei 2009-9-9 14:55 Wednesday
}
您好！这后无法写入任何更好！读通过这篇文章，让我想起我的好旧的房间队友！他总是不停地谈论此事。我会把这个职位给他。相当肯定，他将有一个良好的阅读。许多感谢分享！
3 payday loans canada 2012-1-13 03:07 Friday
}
来自北卡罗来纳州的问候！我在工作中死亡无聊，所以我决定我的iPhone上浏览您的博客，在午休。我真的很喜欢你目前的知识，在这里，不能等待去看看，当我回家。我很惊讶于如何快速您的博客我的手机上加载...我什至不使用无线上网，只是3G ...总之，令人惊讶的博客！
4 search engine optimization vancouver 2012-1-13 16:34 Friday
}
今天，我去海滨，我的孩子们。我发现了一个贝壳，把它给了我4岁的女儿说：“如果你把你的耳朵，你可以听到海洋。 ”她把她的耳朵壳和尖叫。有一个寄居蟹内，掐她的耳。她从来没有想回去！ LOL ，我知道这是完全关闭的话题，但我不得不告诉别人！
5 oh canada 2012-1-21 11:52 Saturday
}

ie6下png图片做背景的循环及定位问题

有什么想说的吗？