IE6下解决png透明图片的问题
kevin.Zhu 发布于:2013-1-16 1:01 分类:div+css 有 13 人浏览,获得评论 0 条
经常我们做png的图片,透明部分在IE6上不兼容。但是又不能不解决,因为IE6用户还是有种一大群人在用。
这里只介绍一种比较简单的方法
就是在css中加入以下代码
以横杠开头是IE识别的属性。
#logo{
background:"path/logo.png";
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/logo.png");
_background:none;
}
这样在IE6或者其他浏览器上都可以有透明效果了。
不过注意的是,如果css是放在html head里面的,红色部分的url和蓝色部分的url是相同的,但是如果放在外部的css文件中,情况就不一样了,蓝色部分的地址应该相对于引用的地址。
//转
特此总结了一些解决方案,不一定是最好。。。
一、用滤镜解决IE6下png不完全透明
注意:ie6png背景图片不显示,别紧张,把绝对路径地址加上即可。
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src=”http://www.361qd.com/images/绝对路径”);
_ background-image: none;
二、ie6里png背景做循环问题:用一个半透明图片做背景循环平铺。解决办法加“sizingMethod=scale”。
filter: progidXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src=”图片名称”);
_ background-image: none;
注意:有些图片存在弊端,如果只是单独颜色循环,这种可以。如果是图案平铺,即不行。具体也还得根据图片而定。。。一句话,尽可能用gif吧。
三、ie6里不做循环的大png图片背景会出现区块被剪切,网站版面一片混乱,文字消失问题:解决办法加sizingMethod=crop。
filter: progidXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop,src=”图片名称”)
_ background-image: none;
四、ie6里png背景下的的连接失效:解决办法给a元素添加样式
链接所在的层以及父级,全都不能有position,否则的话链接无效,即使relative也不行!
五、ie7里png背景下的div下的dl dt dd ul li 等有float浮动时,连接文字在鼠标滑过出现一条背景消失的问题。解决办法是给包含dl dt dd ul li的div大盒子加上一个高度或最小高度。
min-height:50px; 因为ie6下没有这个问题,min-height:又是ie6不支持的,ie7和FF支持,而div要随着文字而伸长,所以我就采用了min-height:。
六、如题二,用滤镜解决IE6下透明问题后,又出现了一新bug!
在背景图上面可能出现,登录框,连文字链接也无法点击了
解决办法是可以把背景图层和上面的内容图层分开,比如
<divstyle=“position:relative;”>
<div>