图片透明,锯齿问题是重构人员很头疼的问题,每当遇到这样的问题都让我感觉到不知道从哪入手,虽然能解决这些问题,但是总感觉多少有点缺点,最近遇到这方面的问题,总结了几种实现一些透明小图标的锯齿问题: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="/UploadFiles/2021-03-30/closebtn.png">
1、书写正常的CSS代码,通过background导入图片,这样所有的浏览器均使用了此PNG图片;
复制代码代码如下:
background:url(closebtn.png) no-repeat 0 0;
2、通过滤镜对引入图片,滤镜引入图片的时候是相对于HTML文件,而不是相对于CSS文件,语法如下:
复制代码代码如下:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/UploadFiles/2021-03-30/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="/UploadFiles/2021-03-30/closebtn.png">
优点:
1、绿色无插件;
2、效率高,速度快;
3、网速慢的时候,不会出现先灰底再透明的情况,支持远程图片;
4、支持Hover等伪类,但是得使用两张图片,网速慢的情况下,会导致第二张图片暂时无法显示,因为还没有完全载入;
缺点:
1、不支持平铺,虽然filter有sizingMethod="scale", 拉伸缩放模式,但是图片会变形,如果单纯的颜色或简单的渐变色还能横向平铺;
2、不支持Img标签;
3、不支持CSS Sprite;
复制代码代码如下:
<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="/UploadFiles/2021-03-30/closebtn.png">
1、书写正常的CSS代码,通过background导入图片,这样所有的浏览器均使用了此PNG图片;
复制代码代码如下:
background:url(closebtn.png) no-repeat 0 0;
2、通过滤镜对引入图片,滤镜引入图片的时候是相对于HTML文件,而不是相对于CSS文件,语法如下:
复制代码代码如下:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/UploadFiles/2021-03-30/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="/UploadFiles/2021-03-30/closebtn.png">
优点:
1、绿色无插件;
2、效率高,速度快;
3、网速慢的时候,不会出现先灰底再透明的情况,支持远程图片;
4、支持Hover等伪类,但是得使用两张图片,网速慢的情况下,会导致第二张图片暂时无法显示,因为还没有完全载入;
缺点:
1、不支持平铺,虽然filter有sizingMethod="scale", 拉伸缩放模式,但是图片会变形,如果单纯的颜色或简单的渐变色还能横向平铺;
2、不支持Img标签;
3、不支持CSS Sprite;
标签:
png24,透明,ie6
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
暂无“格式png24透明底 多种解决png24格式图片在ie6中透明问题”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]