IE6下PNG图片解决.docx

IE6下PNG图片解决
ie6下不支持png图片的透明,这让我们很多好的设计都不得不放弃,着实让人抓狂,但是ie6下也不是完全不能正常显示png的透明图片,我们还是可以通过一些方式来让ie6支持png透明图片。
下面是一个正常情况下chrome和ie6显示透明背景png图片的例子。
我们拿一张png透明背景的图片作为两个div的背景,看一下它在ie6和chrome浏览器下的不同的显示,(以下有两张图片的效果中第一个图片是正常的用法,第二个图片会是在ie6下处理过的效果)。例子目录结构:
html代码如下:
正常用法:background: url("../images/");
在chrome下的显示结果如下:
在ie6下的显示效果如下:
解决方案:
方案1:滤镜
原理:
        ,它可以很多效果,包括现在CSS3中的一些特效,当然,它也可以解决ie6中的png图片透明的问题。
用法: filter:progid:(src="images/ pngtest .png"); 
写到这里,我们看一下效果是否成功了。
效果如图:
结果很令人意外吧,不是说滤镜可以让png透明吗?没什么变化啊。这是因为我们虽然设置了滤镜引入图片,但是由于在其他浏览器中是可以支持png的,所以我们还写了一句background: url("../images/");设置了背景图片,背景图片的层级要比滤镜的高,所以我们看到的是背景图片,那么解决办法当然不是删除背
景图片,因为其他浏览器还要用,所以我们可为ie6的背景设置为none;即加一句background: none;
效果如图:
不知道有没有注意到上面有些什么异常?对,就是用滤镜时图片的路径并不是相对于css文件的,而是相对于html文件的。
在使用滤镜时,如果想使用hover,那么要在自己定义cursor:pointer;
优点:
    ; 
    ,不会出现先灰底再透明的情况,支持远程图片; 
    ; 
缺点: 
    ,网速慢的情况下,会导致第二张图片暂时无法显示,因为还没有完全载入
    ,虽然filter有sizingMethod="scale", 拉伸缩放模式,但是图片会变形,如果单纯的颜色或简单的渐变色还能横向平铺; 
    ; 
    Sprite; 
使用条件: 
     
     Sprite 
    
方案2:HTC插件
 
原理:
         行为的概念。,它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。 
所需文件:
。将这两个文件放入到我们的项目中,然后在css文件中需要用到png图片的标签上引入htc文件
, = thisFolder + '';这样一行代码,大约在19行附近,我们需要更改的只是路径,如本例目录结构所示, = thisFolder + 'images/';
如图:
注意:
在ie6下显示的效果如图所示:
优点:
    ,在引用图片时不再考虑图片的引入和路径问题
     
缺点: 
    
   
    Sprite  
    ,当文件载入之前,会先暂时呈现灰底 
使用条件: 
     
     Sprite 
方案3:CSS行为expression
原理:
    IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和