png透明针对
IE6一直是件挺麻烦
的事情,使用的方法也
是各有不同,大多的原
理是用IE的滤镜来解
决的。
语法:
filter : progid:DXImageTransf orm.Micros oft.AlphaI mageLoader ( enabled=bE nabled , sizingMeth od=sSize , src=sURL ) enabled : 可选项。布尔值(Boolean)。设置或 检索滤镜是否激活。t rue | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(St ring)。设置或检 索滤镜作用的对象的图 片在对象容器边界内的 显示方式。 crop : 剪切图片以适应对象尺 寸。
image : 默认值。增大或减小对象的尺寸边界以适应图 片的尺寸。scale : 缩放图片以适应对象的 尺寸边界。
src : 必选项。字符串(String)。使用绝对 或相对 url 地址指定背景图像。假 如忽略此参数,滤镜将 不会作用。
现在一般在使用的方法
有一下几种:
1、css方法
css:.pngs {
height: 90px;width: 90px;
background-image:url (icon_home .png)!impo rtant; /* FF IE7 */
background-repeat: no-repeat; _filter: progid:DXI mageTransf orm.Micros oft.AlphaI mageLoader (src=’icon _home.png’ ); /* IE6 */
_ background-image: none; /* IE6 */
}xhtml:
这种方法的优点就是使
用简单方便,但是不能
作为背景,且只能用作
单个png图片的使用
。如果要作为背景,需
要新增加一个div层
,并设置其posit
ion:relati
ve;
css
.png div{position:relativ e;} xhml:
CSS 背景PNG透明 及 链接失效问题解决
这种方法可以使用在那
些png图片不多,且
不需要repeat的
情况下。
2、js方法
< language=”JavaScript ”>
function correctPNG() // correctly handle PNG transparen cy in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion .split(“MS IE”)
var version = parseFloat(arVersion [1])
if ((version >= 5.5) && (document.body.filte rs))
{
for(var j=0; j
这种js先判断是否I
E,然后判断ie版本
,版本在6.0下则判
定函数,给png的图
片添加滤镜。
使用起来的确方便,无
论多少图片都可以解决
,但是依然无法rep
eat。
3、htc方法
htc相当于完全通过
插件的方法修复的IE
6的bug,功能强大
,支持repeat,
背景等功能,使用起来
也很方便。
使用一个iepngf
ix.htc 文件,和一个透明的g
if文件。
使用方法:
//在这里可以加入其他用到png图片的i d或者class
< type=”text/javascrip t” src=”jscss /iepngfix_ tilebg.js” >
ps:如果需要rep
eat背景,往往需要
设置这个div 宽度为100%。
总结这几种方法,第三
种方法是最简单使用,
且容易推广的方法,建
议可以做个公共的地址
,有产品需要,只需要
应用这个公共地址就行
了。