曾经在《关于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加载语句也可以加上一个小小的改动,加上“<!–[if IE 6]><![endif]–>”标签,既而只针对IE6,而解放了其他浏览器,使它们在页面加载时就忽略iepngfix_tilebg.js这个文件,提高效率。而可怜的IE6,让它接受暴风骤雨般的CPU消耗吧,没办法,爱莫能助了。
<!–[if IE 6]>
<script language="javascript" src="iepngfix_tilebg.js"></script>
<![endif]–>
转载http://hi.baidu.com/wand168/blog/item/81a27cdbd5270be339012fd5.html
来源http://www.twinhelix.com/css/iepngfix/