Welcome to Delicate template
Header
Just another WordPress site
Header

让png图片在IE6里面透明

4月 8th, 2011 | Posted by 无 名 in css | html

正常情况下,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>

  将其插入到中

优化:

一、当需要用到的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消耗吧,没办法,爱莫能助了。

    <!--[if IE 6]>
    <script language="javascript" src="iepngfix_tilebg.js"></script>
    <![endif]-->

下载文件里面有示例,欢迎围观。

You can follow any responses to this entry through the RSS 2.0 Both comments and pings are currently closed.