照片全透明,锯齿难题是重构人员很头疼的难题,每当遇到这样的难题都让我觉得到不知道道从哪下手,尽管能处理这些难题,可是总觉得是多少有点缺陷,近期遇到这层面的难题,总结了几种完成1些全透明小标志的锯齿
难题:png8文件格式的全透明情况照片,会让访问器在先显示信息的全过程中照片边沿会有1些锯齿状况,png24能够处理这些锯齿难题,可是ie6不适用png24全透明,但是运用ie6的hack难题有两种处理的方法:
<div class="pwdTipsBg"></div>
<div class="pwdTips">
<span class="closeBtn"></span>
<i class="pwdTipsIcon"></i>
认证码不正确,请填写全新获得的认证码!
</div>
1. 运用ie6的hack难题,用两种文件格式的照片来表明;1种别的访问器用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:⑴52px ⑹8px; width:26px; height:26px;}
.pwdTips span{ position:absolute; top:⑴0px; right:⑴5px; width:33px; height:33px; background:url(closebtn.png) no-repeat 0 0; _background:url(scsprites.png) no-repeat ⑴19px ⑹3px; cursor:pointer; display:block;}
2. 运用filter滤镜处理照片难题
.pwdTips span{ position:absolute; top:⑴0px; right:⑴5px; width:33px; height:33px; background:url(closebtn.png) no-repeat 0 0; _background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="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="css/safecenter/closebtn.png");
编码写到这里,大家放到IE6下检测后发现IE6還是沒有全透明,由于大家尽管设定了滤镜引进照片,可是background也一样载入了此照片,又由于background的涂层比滤镜设定的高,因此才沒有显示信息出来,
因此最后的编码设定为:
pwdTips span{ position:absolute; top:⑴0px; right:⑴5px; width:33px; height:33px; background:url(closebtn.png) no-repeat 0 0; _background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/safecenter/closebtn.png"); cursor:pointer; display:block;}
优势: 1、翠绿色无软件;
2、高效率高,速率快;
3、网速慢的情况下,不容易出現先灰底再全透明的状况,适用远程控制照片;
4、适用Hover等伪类,可是得应用两张照片,网速慢的状况下,会致使第2张照片临时没法显示信息,由于都还没彻底加载;
缺陷:
1、不适用平铺,尽管filter有sizingMethod="scale", 拉伸放缩方式,可是照片会形变,假如单纯性的色调或简易的渐变色色还能横向平铺;
2、不适用Img标识;
3、不适用CSS Sprite;