admin管理员组文章数量:1531432
2024年6月20日发(作者：)
路漫漫其修远兮，吾将上下而求索 - 百度文库
实现png图片和png背景透明的代码(支持多浏览器)
Firefox和Opera对PNG的支持非常的好，都是IE却无视PNG图片这一特性的“存在”，
虽然IE7已经支持都是IE6还是不行。虽然有让IE6支持PNG透明背景的JS程序，都是
不是很方便，还是用CSS来实现的好。使用到的就是：IE5.5+的AlphaImageLoader
滤镜。
背景透明 解决办法
#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
}
html>body #div1 {
background-repeat: repeat;background-image: url();
}
* #div1 {filter:
progid:mageLoader(enabled=true,
sizingMethod=scale, src="")
}
附加：IE才识别的通配符（*），来定义IE浏览器中的滤镜
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>）
语法：
filter : progid:mageLoader
( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
1
路漫漫其修远兮，吾将上下而求索 - 百度文库
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器
边界内的显示方式。 crop : 剪切图片以适应对象
尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。
假如忽略此参数，滤镜将不会作用。
图片透明
如果在网页中直接插入png图片想使其透明只需加入以下js代码，整个页面内的所有直接
插入的png图片都可以实现透明方法
请下载附件详细
另外，顺便说一下从PS输出保存PNG-8和PNG24有什么不同
ie6并不是不支持png，它支持索引颜色的PNG-8，而是不支持RGB颜色的PNG-24。
ie6里的PNG-24图片做背景主要有以下几个问题：
一、ie6里png背景透明问题：解决办法用滤镜。这个一般高手们都知道。
注意：src 这个路径是指加载滤镜的页面相对于图片的路径，而不是css文件相对于图片
的路径。这跟一般的图片加载有区别。
filter: progid:mageLoader(src=”图片名称”);
_ background-image: none;
二、ie6里png背景做循环问题：用一个2px*2px的半透明图片做背景循环。解决办法加
“sizingMethod=scale”。
filter:
progid:mageLoader(sizingMethod=scale,
src=”图片名称”);
_ background-image: none;
三、ie6里不做循环的大png图片背景会出现区块被剪切，网站版面一片混乱，文字消失问
题：解决办法加sizingMethod=crop。
filter: progid:mageLoader(enabled=true,
sizingMethod=crop,src=”图片名称”)
_ background-image: none;
四、ie6里png背景下的的连接失效：解决办法给a元素添加样式position:relative;
五、ie7里png背景下的div下的dl dt dd ul li 等有float浮动时，连接文字在鼠标滑过
2
路漫漫其修远兮，吾将上下而求索 - 百度文库
出现一条背景消失的问题。解决办法是给包含dl dt dd ul li的div大盒子加上一个高度或
最小高度。
min-height:50px; 因为ie6下没有这个问题，min-height:又是ie6不支持的，ie7和FF
支持，而div要随着文字而伸长，所以我就采用了min-height:。
六、最后关于png背景定位的问题。 我实在没想出来用解决的办法，我加了
“sizingMethod=scale”。让它在ie6里放大去吧，虽然效果上没有FF好，但是总比贴着
最左边看起来舒服。
3
版权声明：本文标题：实现png图片和png背景透明的代码 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1718817625a729025.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论