因IE6对png透明不支持,所以也造就了一批高人,提供了n种解决办法,本贴发了几种方法,看看哪种方案比较适合你。
1、解决PNG图片在IE6下背景不透明的问题 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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
2、IE6使用滤镜使PNG图片透明后,容器内链接失效的问题。
你可以粘贴到DER软件里打开测试一下 解决方法是为链接定义一个相对定位属性。position:relative
3、解决ie7以下浏览器PNG图片背景不透明且链接失效的办法
在dream...软件里面测试一下,可以看效果哦看到了吧,在IE6下测试一下你会发现,PNG的背景已经是透明的了。但是有些时候我们需要在定位的层上实现这样的效果,如本例的效果我想把它固定在其它层之上,类似于弹出窗口的样子,那么就要用position:absolute;把这个层浮动起来。这时问题又出现了,链接居然失效了???
=============================================================================================在dream...软件里面测试一下,可以看效果哦之前也看到别人提供的方法,说把为链接定义个相对属性position:relative;,但本人试了好像不行。那么有没有其它方法能实现了,下面本人提供一个比较笨的方法来实现:既然是绝对位置的浮动层,那么我们采用两个绝对位置的浮动层,把背景单独设置在一个层上,并且让这个层居下,在上边的层上放文字及链接内容,这种方法可行吗??实践是检验真理的唯一标准,让我们拭目以待!!
=============================================================================================在dream...软件里面测试一下,可以看效果哦哈哈,问题居然解决了!采用background:url(/uploadfile/200806/17/9E162710915.png) !important; background:none;filterrogidXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="image", src="/uploadfile/200806/17/9E162710915.png")这种方式让背景透明的,当采用position:absolute;定位时也可以采用双层重叠的方式解决链接失效的问题
=============================================================================================
最后一种方法虽然解决了透明及链接问题,但是却是有高度,在高度不固定的情况下上述方法还是行不通的。这时候就必修使用JS来解决。
另外一端的文件http://www.tanglin.net/DD_belatedPNG_0.0.7a-min.js ,IE6要重新刷新一下按F5,本调用相对路径就行了直正自己调用是没问题的链接
这样OK!!
IE6 PNG透明失效解决思路
前端开发博客 0 1,738 网页设计
因IE6对png透明不支持,所以也造就了一批高人,提供了n种解决办法,本贴发了几种方法,看看哪种方案比较适合你。
1、解决PNG图片在IE6下背景不透明的问题 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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
2、IE6使用滤镜使PNG图片透明后,容器内链接失效的问题。
你可以粘贴到DER软件里打开测试一下 解决方法是为链接定义一个相对定位属性。position:relative
3、解决ie7以下浏览器PNG图片背景不透明且链接失效的办法
在dream...软件里面测试一下,可以看效果哦看到了吧,在IE6下测试一下你会发现,PNG的背景已经是透明的了。但是有些时候我们需要在定位的层上实现这样的效果,如本例的效果我想把它固定在其它层之上,类似于弹出窗口的样子,那么就要用position:absolute;把这个层浮动起来。这时问题又出现了,链接居然失效了???
=============================================================================================
在dream...软件里面测试一下,可以看效果哦之前也看到别人提供的方法,说把为链接定义个相对属性position:relative;,但本人试了好像不行。那么有没有其它方法能实现了,下面本人提供一个比较笨的方法来实现:既然是绝对位置的浮动层,那么我们采用两个绝对位置的浮动层,把背景单独设置在一个层上,并且让这个层居下,在上边的层上放文字及链接内容,这种方法可行吗??实践是检验真理的唯一标准,让我们拭目以待!!
=============================================================================================
在dream...软件里面测试一下,可以看效果哦哈哈,问题居然解决了!采用background:url(/uploadfile/200806/17/9E162710915.png) !important; background:none;filterrogidXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="image", src="/uploadfile/200806/17/9E162710915.png")这种方式让背景透明的,当采用position:absolute;定位时也可以采用双层重叠的方式解决链接失效的问题
=============================================================================================
最后一种方法虽然解决了透明及链接问题,但是却是有高度,在高度不固定的情况下上述方法还是行不通的。这时候就必修使用JS来解决。
另外一端的文件http://www.tanglin.net/DD_belatedPNG_0.0.7a-min.js ,IE6要重新刷新一下按F5,本调用相对路径就行了直正自己调用是没问题的链接
这样OK!!