IE6下PNG32图片的透明

浅浅的花香味﹌ 2022-01-06 17:17 163阅读 0赞

### 1、滤镜 ###

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

#### 属性： ####

1.  enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
    
     *  true： 默认值。滤镜激活。
     *  false：滤镜被禁止。
2.  sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
    
     *  crop：剪切图片以适应对象尺寸。
     *  image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
     *  scale：缩放图片以适应对象的尺寸边界。
     *  各个属性值所代表的含义：[http://images.cnblogs.com/cnblogs\_com/rainman/139529/o\_ie6\_png\_filter.png][http_images.cnblogs.com_cnblogs_com_rainman_139529_o_ie6_png_filter.png]
3.  src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

#### 示例 ####

.png {
        background: url(绝对路径/images/bg.png) repeat;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="绝对路径/images/bg.png");
        _background:none;
    }

#### 总结 ####

*  背景无法平铺；
 *  背景图片无法定位，即不可以使用background-position属性，因此也不便于制作CSS Sprite；
 *  同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的
 *  该滤镜中的src属性最好取绝对路径，如果取相对路径的话必须是相对于当前网页路径，而不是我们习惯的“相对于css的路径”
 *  AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。
 *  为了使滤镜起作用，应该为容器设置宽度和高度值。
 *  只能当做background使用，对于形式的PNG图片需要变相处理。
 *  sizingMethod='scale'，其七夕哦啊过是拉伸图片，可以模拟平铺。

### 2、iepngfix.htc ###

*  网址：[http://www.twinhelix.com/css/iepngfix/][http_www.twinhelix.com_css_iepngfix]
 *  实现原理也是滤镜，它将这些操作封装到一个.htc的文件中，使用起来比较方便。
 *  Demo：[http://www.twinhelix.com/css/iepngfix/demo/][http_www.twinhelix.com_css_iepngfix_demo]

### 3、DD\_belatedPNG ###

*  这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.
 *  它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD\_belatedPNG还支持a:hover属性,以及标签
 *  网址：[http://www.dillerdesign.com/experiment/DD\_belatedPNG/][http_www.dillerdesign.com_experiment_DD_belatedPNG]
 *  Demo：[http://www.ediyang.com/demo/DD\_Png/  
      
    ][http_www.ediyang.com_demo_DD_Png_]

### 参考文章 ###

*  ["使IE6支持PNG图像的透明"][IE6_PNG]
 *  ["IE6下使用滤镜后链接不能点击的BUG"][IE6_BUG]
 *  ["使IE6下PNG背景透明的七种方法"][IE6_PNG 1]
 *  ["PNG透明背景图片的无界应用"][PNG]

转载于:https://www.cnblogs.com/rainman/archive/2011/09/11/2173735.html

[http_images.cnblogs.com_cnblogs_com_rainman_139529_o_ie6_png_filter.png]: http://images.cnblogs.com/cnblogs_com/rainman/139529/o_ie6_png_filter.png
[http_www.twinhelix.com_css_iepngfix]: http://www.twinhelix.com/css/iepngfix/
[http_www.twinhelix.com_css_iepngfix_demo]: http://www.twinhelix.com/css/iepngfix/demo/
[http_www.dillerdesign.com_experiment_DD_belatedPNG]: http://www.dillerdesign.com/experiment/DD_belatedPNG/
[http_www.ediyang.com_demo_DD_Png_]: http://www.ediyang.com/demo/DD_Png/
[IE6_PNG]: http://www.pengzao.com/article/ie6-png.html
[IE6_BUG]: http://www.css88.com/archives/2916
[IE6_PNG 1]: http://blog.csdn.net/yanguiqingcheng/article/details/6305441
[PNG]: http://www.planabc.net/2007/01/10/ie6_png_hack/