11-03
22

实现png图片和png背景透明的代码(支持多浏览器)(

Firefox和Opera对PNG的支持非常的好,都是IE却无视PNG图片这一特性的“存在”,虽然IE7已经支持都是IE6还是不行。虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好。使用到的就是:IE5.5+的AlphaImageLoader滤镜。

1.png背景透明 解决办法
#div1 {
   height: 600px;
   width: 260px;
   padding: 20px;
   background-repeat: repeat;
   }

html>body #div1 {
   background-repeat: repeat;background-image: url(bj1.png);
}
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")
}

附加:IE才识别的通配符(*),来定义IE浏览器中的滤镜

         Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器(>)

语法:

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.png图片透明

如果在网页中直接插入png图片想使其透明只需加入以下js代码,整个页面内的所有直接插入的png图片都可以实现透明方法

请下载附件详细





另外,顺便说一下从PS输出保存PNG-8和PNG24有什么不同

ie6并不是不支持png,它支持索引颜色的PNG-8,而是不支持RGB颜色的PNG-24。

ie6里的PNG-24图片做背景主要有以下几个问题:

一、ie6里png背景透明问题:解决办法用滤镜。这个一般高手们都知道。

注意:src 这个路径是指加载滤镜的页面相对于图片的路径,而不是css文件相对于图片的路径。这跟一般的图片加载有区别。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”图片名称”);
_ background-image: none;

二、ie6里png背景做循环问题:用一个2px*2px的半透明图片做背景循环。解决办法加“sizingMethod=scale”。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src=”图片名称”);
_ background-image: none;

三、ie6里不做循环的大png图片背景会出现区块被剪切,网站版面一片混乱,文字消失问题:解决办法加sizingMethod=crop。

filter: progid:DXImageTransform.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:。

六、最后关于png背景定位的问题。 我实在没想出来用解决的办法,我加了“sizingMethod=scale”。让它在ie6里放大去吧,虽然效果上没有FF好,但是总比贴着最左边看起来舒服。



文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
评论: 0 | 引用: 0
发表评论
昵 称:
密 码: 游客发言不需要密码.
验证码: 验证码
内 容:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 1000 字 | UBB代码 关闭 | [img]标签 关闭