实现png图片和png背景透明的代码.doc

《实现png图片和png背景透明的代码.doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、实现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;backgro

2、und-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=sSi

3、ze,src=sURL)属性：enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true

4、false　　　　　　true:默认值。滤镜激活。　　　　　　false:滤镜被禁止。sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop:剪切图片以适应对象尺寸。　　　　　　　　image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。　　　　　　　　scale:缩放图片以适应对象的尺寸边界。　　　　　　　　src:必选项。字符串(String)。使用绝对或相对url地址指定背景图像。假如忽略此参数

5、，滤镜将不会作用。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:DXIma

6、geTransform.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图片背景会出现区块被剪切，网站版面一片混乱，文字消失问题：解决

7、办法加sizingMethod=crop。filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src=”图片名称”)_background-image:none;四、ie6里png背景下的的连接失效：解决办法给a元素添加样式position:relative;五、ie7里png背景下的div下的dldtddulli等有float浮动时，连接文字在鼠标滑过出现一条背景消失的问题。解决办法是给包含dldtddulli的div大盒子加上一个高度或最小高度。min-hei

8、ght:50px;因为ie6下没有这个问题，min-height:又是ie6不支持的，ie7和FF支持，而div要随着文字而伸长，所以我就采用了min-height:。六、最后关于png背景定位的问题。我实在没想出来用解决的办法，我加了“sizingMethod=scale”。让它在ie6里放大去吧，虽然效果上没有FF好，但是总比贴着最左边看起来舒服。