IE6下支持png透明的写法

    话说png是个好东西,但是一般好东西IE6都不支持(万恶的IE6啊~)

    在IE6下用透明的png时会有一个灰色的背景,很难看(还好,IE7就已经开始支持png的透明了)

    那么我们怎么样才能让万恶的IE6支持png透明的,下面我们来看个例子

    一般我们写代码是这样写的:

.bg{

    width:10px;

    height:10px;

    background:url(../images/tm.png) no-repeat;

}

这样的话是不兼容ie6的,所以我们应该改成这样:

.bg{

    width:10px;

    height:10px;

    background:url(../images/tm.png) no-repeat !important;  /*支持IE7,FF*/

    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tm.png');   /*支持IE6*/

    _ background-image: none;   /*支持IE6*/

}

 

    filter是微软提供的一个加载透明的一个滤镜,用它就可以来实现IE6下的透明效果了

    这里要注意的是:用滤镜加载的时候的相对路径是相对网页文件的位置,而不是原来的相对css文件的位置,所以这里希望大家注意一下。。。

 

    嗯嗯,大概就是这样。。。 最后把filter这个路径的参数贴出来,大家参考一下~

 

    PS:发现自己最近跟前端关系有点亲密,是不是在预示着什么捏。。。。  = =!

 

filter语法:

    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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

特性:

    Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。

    sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。

    src : 可读写。字符串(String)。参阅 src 属性。

说明:

    在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。

    PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

标签: IE6, png, 透明

添加新评论

icon_question.gificon_razz.gificon_sad.gificon_evil.gificon_exclaim.gificon_smile.gificon_redface.gificon_biggrin.gificon_surprised.gificon_eek.gificon_confused.gificon_cool.gificon_lol.gificon_mad.gificon_twisted.gificon_rolleyes.gificon_wink.gificon_idea.gificon_arrow.gificon_neutral.gificon_cry.gificon_mrgreen.gif