今天小编跟大家讲解下有关格式png24透明底 多种解决png24格式图片在ie6中透明问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关格式png24透明底 多种解决png24格式图片在ie6中透明问题 的相关资料，希望小伙伴们看了有所帮助。
图片透明 锯齿问题是重构人员很头疼的问题 每当遇到这样的问题都让我感觉到不知道从哪入手 虽然能解决这些问题 但是总感觉多少有点缺点 最近遇到这方面的问题 总结了几种实现一些透明小图标的锯齿问题：png8格式的透明背景图片 会让浏览器在先显示的过程中图片边缘会有一些锯齿情况 png24可以解决这些锯齿问题 但是ie6不支持png24透明 不过利用ie6的hack问题有两种解决的办法： 复制代码代码如下: <div class="pwdTipsBg"></div> <div class="pwdTips"> <span class="closeBtn"></span> <i class="pwdTipsIcon"></i> 验证码错误 请填写最新获取的验证码！ </div> 1. 利用ie6的hack问题 用两种格式的图片来表示；一种其他浏览器用png24格式的图片显示 ie6用png8格式的显示 复制代码代码如下: .pwdTipsBg{ height:100%;background:#000; opacity:0.5; position: absolute; left:0; top:0;z-index:1001; filter: alpha(opacity=50);width:100%; zoom:1;} .pwdTips{ position:absolute; left:40%;top:40%; z-index:1009; width:285px; background:#ececec; height:55px; padding:45px 20px 10px 80px;} .pwdTips i{ position:absolute; left:40px; top:40px; background-position:-152px -68px; width:26px; height:26px;} .pwdTips span{ position:absolute; top:-10px; right:-15px; width:33px; height:33px; background:url(closebtn.png) no-repeat 0 0; _background:url(scsprites.png) no-repeat -119px -63px; cursor:pointer; display:block;} 2. 利用filter滤镜解决图片问题 复制代码代码如下: .pwdTips span{ position:absolute; top:-10px; right:-15px; width:33px; height:33px; background:url(closebtn.png) no-repeat 0 0; _background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.aidi.net.cn//css/css/safecenter/closebtn.png"); cursor:pointer; display:block;} 1、书写正常的CSS代码 通过background导入图片 这样所有的浏览器均使用了此PNG图片； 复制代码代码如下: background:url(closebtn.png) no-repeat 0 0; 2、通过滤镜对引入图片 滤镜引入图片的时候是相对于HTML文件 而不是相对于CSS文件 语法如下： 复制代码代码如下: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.aidi.net.cn//css/css/safecenter/closebtn.png"); 代码写到这里 我们放到IE6下测试后发现IE6还是没有透明 因为我们虽然设置了滤镜引入图片 但是background也同样加载了此图片 又因为background的图层比滤镜设置的高 所以才没有显示出来 所以最终的代码设置为： 复制代码代码如下: pwdTips span{ position:absolute; top:-10px; right:-15px; width:33px; height:33px; background:url(closebtn.png) no-repeat 0 0; _background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.aidi.net.cn//css/css/safecenter/closebtn.png"); cursor:pointer; display:block;} 优点： 1、绿色无插件； 2、效率高 速度快； 3、网速慢的时候 不会出现先灰底再透明的情况 支持远程图片； 4、支持Hover等伪类 但是得使用两张图片 网速慢的情况下 会导致第二张图片暂时无法显示 因为还没有完全载入； 缺点： 1、不支持平铺 虽然filter有sizingMethod="scale", 拉伸缩放模式 但是图片会变形 如果单纯的颜色或简单的渐变色还能横向平铺； 2、不支持Img标签； 3、不支持CSS Sprite；来源：爱蒂网
