PNG透明兼容IE6的几种方法(转)-白红宇

PNG透明兼容IE6的几种方法(转)

阅读量：6543 次

发布时间：2019-06-24

本文共 1432 字，大约阅读时间需要 4 分钟。

png 透明针对 IE6 一直是件挺麻烦的事情，使用的方法也是各有不同，大多的原理是用 IE 的滤镜来解决的。

语法：

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

enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。

sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。

image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale : 缩放图片以适应对象的尺寸边界。

src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

现在一般在使用的方法有一下几种：

1. CSS 方法

.pngs {
   　　height: 90px;width: 90px;　　background-image:url(icon_home.png)!important;  /* FF IE7 */　　background-repeat: no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');  /* IE6 */　　_ background-image: none; /* IE6 */}

在 HTML 如下调用：

<div class="pngs"></div>

这种方法的优点就是使用简单方便，但是不能作为背景，且只能用作单个png图片的使用。如果要作为背景，需要新增加一个div层，并设置其position:relative;

.png div{
   position:relative;}
     
      　　
      
       CSS 背景PNG透明 及 链接失效问题解决

这种方法可以使用在那些png图片不多，且不需要repeat的情况下。

2.JS 方法

这种js先判断是否IE，然后判断ie版本，版本在6.0下则判定函数，给png的图片添加滤镜。

使用起来的确方便，无论多少图片都可以解决，但是依然无法repeat。

3. htc方法

htc 相当于完全通过插件的方法修复的 IE6 的 bug，功能强大，支持 repeat，背景等功能，使用起来也很方便。使用一个iepngfix.htc 文件，和一个透明的 gif 文件。


       //在这里可以加入其他用到png图片的id或者class

ps：如果需要 repeat 背景，往往需要设置这个 div 宽度为100%。

总结这几种方法，第三种方法是最简单使用，且容易推广的方法，建议可以做个公共的地址，有产品需要，只需要应用这个公共地址就行了。

转载自：http://www.nowamagic.net/javascript/js_PngInIE6.php

转载于:https://www.cnblogs.com/JoannaQ/p/3290718.html

你可能感兴趣的文章