IE6 PNG图片底色问

经常我们做png的图片,透明部分在IE6上不兼容。但是又不能不解决,因为IE6用户还是有种一大群人在用。

这里只介绍两种比较简单的方法
一、使用滤镜
.logo{
background:" path/logo.png";
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src="path/logo.png");
_background:none;
}
这样在IE6或者其他浏览器上都可以有透明效果了。
不过注意的是,如果css是放在htmlhead里面的,红色部分的url和蓝色部分的url是相同的,但是如果放在外部的css文件中,情况就不一样了,蓝色部分的地址应该相对于引用的地址。
二、使用在IE6下可以透明的png图片
.logo{
background:" path/logo.png";
_background:" path/logo_ie6.png"
}

   我们经常使用的png图片为png-24的。色彩视觉较好。但是在IE6下会有灰底。而png-8的png图片较小且在IE6下不会出现灰底。如果是一些网站中常用的小图标完全可以彩png-8的png图片。视觉效果基本察觉不出来而且不会有需要解决IE6下灰底的麻烦。如果较大的可以采用上面CSS实现IE6和别的浏览器访问不同页面


//下面部分均为转载
特此总结了一些解决方案,不一定是最好。。。

一、用滤镜解决IE6下png不完全透明

注意: ie6png背景图片不显示,别紧张,把绝对路径地址加上即可。
filter: progid :XImageTransform.Microsoft.AlphaImageLoader(src=” http://www.361qd.com/images/ 绝对路径”);
_ background-image: none;

二、ie6里png背景做循环问题:用一个半透明图片做背景循环平铺。解决办法加“sizingMethod=scale”。
filter: progid :XImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=”图片名称”);
_ background-image: none;
注意:有些图片存在弊端,如果只是单独颜色循环,这种可以。如果是图案平铺,即不行。具体也还得根据图片而定。。。一句话,尽可能用gif吧。

三、ie6里不做循环的大png图片背景会出现区块被剪切,网站版面一片混乱,文字消失问题:解决办法加sizingMethod=crop。
filter: progid :XImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src=”图片名称”)
_ background-image: none;

四、ie6里png背景下的的连接失效:解决办法给a元素添加样式  position:relative;

链接所在的层以及父级,全都不能有position,否则的话链接无效,即使relative也不行!



五、ie7里png背景下的div下的dl dt dd ul li等有float浮动时,连接文字在鼠标滑过出现一条背景消失的问题。解决办法是给包含dl dt dd ulli的div大盒子加上一个高度或最小高度。
min-height:50px;因为ie6下没有这个问题,min-height:又是ie6不支持的,ie7和FF支持,而div要随着文字而伸长,所以我就采用了min-height:。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值