云南龙网

  1. 首页 > 生活百科 > >

兼容IE6的图片圆角边框CSS

生活百科

实现原理很简单,利用绝对定位,使一个背景为PNG图片的边框覆盖在原始图片上面.而兼容IE6,本文用的是一段JS来让万恶的万万人诅咒的IE6识别PNG图片的.当然,你还可以用滤镜的方式让IE6实现PNG效果.本文后面我会附上两种解决方案.个人比较推崇用JS来实现IE6PNG,适应性比较强,但如果你只有一两处用到PNG,完全可以用滤镜的方式来实现.
核心CSS代码:

复制代码代码如下:
.i_roundimg{ background:url(http://www.jb51.net/do/uploads/userup/1007/04191G15618.png) no-repeat;cursor:pointer;width:60px;height:60px;position:absolute;}

DEMO用到的PNG背景图片:

兼容IE6的图片圆角边框CSS

文章插图



!DOCTYPE html html head meta charset="gb2312" / title兼容IE6的图片圆角边框@Mr.Think/title style body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em} h1{font-size:1em; font-weight:normal;} h1 a{background:#CFF; padding:2px 3px; text-decoration:none;} h1 a:hover{background:#eee; text-decoration:underline} h2{font-size:1.2em; color:#a40000; text-align:center; line-height:2em} .box{width:600px; margin:2em auto} .box li{display:inline; margin:1em} .box li img{width:60px; height:60px;border:0;} .box li .i_roundimg{ background:url(http://www.jb51.net/do/uploads/userup/1007/04191G15618.png) no-repeat;cursor:pointer;width:60px;height:60px;position:absolute;} /*如果只有一处用到PNG背景可以用以下代码 .box li .i_roundimg{ background:url(http://www.jb51.net/do/uploads/userup/1007/04191G15618.png) no-repeat;_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://www.rkxy.com.cn/dnjc/’http://www.jb51.net/do/uploads/userup/1007/04191G15618.png’,sizingMethod=’scale’);cursor:pointer;width:60px;height:60px;position:absolute;} */ /style /head body h1a href="http://mrthink.net/"Mr.Think的个人博客/a@专注前端技术,热爱PHP,崇尚简单生活./h1 h2兼容IE6的图片圆角边框@Mr.Think,支持可恨可恶的万万人诅咒的IE6哦~/h2 ol class="box" lia target="_blank" href="http://mrthink.net/"span class="i_roundimg"/spanimg src="http://pic.yunnanlong.com/230523/00400L928-1.gif" width="60" height="60"/a/li lia target="_blank" href="http://mrthink.net/"span class="i_roundimg"/spanimg src="http://pic.yunnanlong.com/230523/00400L928-1.gif" width="60" height="60"/a/li lia target="_blank" href="http://mrthink.net/"span class="i_roundimg"/spanimg src="http://pic.yunnanlong.com/230523/00400L928-1.gif" width="60" height="60"/a/li lia target="_blank" href="http://mrthink.net/"span class="i_roundimg"/spanimg src="http://pic.yunnanlong.com/230523/00400L928-1.gif" width="60" height="60"/a/li lia target="_blank" href="http://mrthink.net/"span class="i_roundimg"/spanimg src="http://pic.yunnanlong.com/230523/00400L928-1.gif" width="60" height="60"/a/li /ol !--ie6 png**js,别忘了在最后一行设置包含png的标签-- !--[if IE 6] script eval(function(p,a,c,k,e,r){e=function(c){return(ca?’’:e(parseInt(c/a))) ((c=c%a)35?String.fromCharCode(c 29):c.toString(36))};if(!’’.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return’w ’};c=1};while(c--)if(k[c])p=p.replace(new RegExp(’b’ e(c) ’b’,’g’),k[c]);return p}(’2 E={J:’E’,Z:{},1E:7(){4(x.1l!x.1l[6.J]){x.1l.23(6.J,’24:25-26-27:3’)}4(1F.11){1F.11(’28’,7(){E=29})}},1G:7(){2 a=x.1m(’8’);x.1H.1b.1n(a,x.1H.1b.1b);2 b=a.1o;b.1c(6.J ’:*’,’{12:2a(#1I#2b)}’);b.1c(6.J ’:9’,’Q:1p;’);b.1c(’1J.’ 6.J ’1K’,’12:y; 1q:y; Q:1p; z-2c:-1; 1d:-1r; 1L:1M;’);6.1o=b},1N:7(){2 a=13.2d;4(13.1e.K(’2e’)!=-1||13.1e.K(’1q’)!=-1){E.1f(a)}4(13.1e==’8.1s’){2 b=(a.F.1s==’y’)?’y’:’2f’;G(2 v M a.3){a.3[v].9.8.1s=b}}4(13.1e.K(’14’)!=-1){E.1t(a)}},1t:7(a){4(a.F.14.K(’2g’)!=-1){2 b=a.F.14;b=1u(b.2h(b.1v(’=’) 1,b.1v(’)’)),10)/2i;a.3.N.9.8.14=a.F.14;a.3.C.I.2j=b}},15:7(a){2k(7(){E.1f(a)},1)},2l:7(a){2 b=a.1O(’,’);G(2 i=0;ib.2m;i){6.1o.1c(b[i],’12:2n(E.1P(6))’)}},1f:7(a){a.S.1Q=’’;6.1R(a);6.16(a);6.1t(a);4(a.O){6.1S(a)}},1T:7(b){2 c=6;2 d={2o:’16’,2p:’16’};4(b.17==’A’){2 e={2q:’15’,2r:’15’,2s:’15’,2t:’15’};G(2 a M e){d[a]=e[a]}}G(2 h M d){b.11(’1w’ h,7(){c[d[h]](b)})}b.11(’2u’,6.1N)},1x:7(a){a.8.2v=1;4(a.F.Q==’2w’){a.8.Q=’2x’}},1S:7(a){2 b={’2y’:P,’2z’:P,’2A’:P};G(2 s M b){a.3.N.9.8[s]=a.F[s]}},1R:7(a){4(!a.F){1g}U{2 b=a.F}G(2 v M a.3){a.3[v].9.8.1U=b.1U}a.S.18=’’;a.S.19=’’;2 c=(b.18==’1V’);2 d=P;4(b.19!=’y’||a.O){4(!a.O){a.D=b.19;a.D=a.D.2B(5,a.D.1v(’")’)-5)}U{a.D=a.1h}2 e=6;4(!e.Z[a.D]){2 f=x.1m(’1J’);e.Z[a.D]=f;f.2C=e.J ’1K’;f.S.1Q=’12:y; Q:1p; 1y:-1r; 1d:-1r; 1q:y;’;f.11(’2D’,7(){6.1i=6.2E;6.1j=6.2F;e.16(a)});f.1h=a.D;f.1W(’1i’);f.1W(’1j’);x.1X.1n(f,x.1X.1b)}a.3.C.I.1h=a.D;d=V}a.3.C.I.1w=!d;a.3.C.I.N=’y’;a.3.N.9.8.18=b.18;a.S.19=’y’;a.S.18=’1V’},16:7(e){2 f=e.F;2 g={’W’:e.2G 1,’H’:e.2H 1,’w’:6.Z[e.D].1i,’h’:6.Z[e.D].1j,’L’:e.2I,’T’:e.2J,’1k’:e.2K,’1z’:e.2L};2 i=(g.L g.1k==1)?1:0;2 j=7(a,l,t,w,h,o){a.2M=w ’,’ h;a.2N=o ’,’ o;a.2O=’2P,1Y’ w ’,1Y’ w ’,’ h ’2Q,’ h ’ 2R’;a.8.1i=w ’u’;a.8.1j=h ’u’;a.8.1y=l ’u’;a.8.1d=t ’u’};j(e.3.N.9,(g.L (e.O?0:g.1k)),(g.T (e.O?0:g.1z)),(g.W-1),(g.H-1),0);j(e.3.C.9,(g.L g.1k),(g.T g.1z),(g.W),(g.H),1);2 k={’X’:0,’Y’:0};2 m=7(a,b){2 c=P;2S(b){1a’1y’:1a’1d’:k[a]=0;1A;1a’2T’:k[a]=.5;1A;1a’2U’:1a’2V’:k[a]=1;1A;1I:4(b.K(’%’)!=-1){k[a]=1u(b)*.2W}U{c=V}}2 d=(a==’X’);k[a]=2X.2Y(c?((g[d?’W’:’H’]*k[a])-(g[d?’w’:’h’]*k[a])):1u(b));4(k[a]==0){k[a]}};G(2 b M k){m(b,f[’2Z’ b])}e.3.C.I.Q=(k.X/g.W) ’,’ (k.Y/g.H);2 n=f.30;2 p={’T’:1,’R’:g.W i,’B’:g.H,’L’:1 i};2 q={’X’:{’1B’:’L’,’1C’:’R’,’d’:’W’},’Y’:{’1B’:’T’,’1C’:’B’,’d’:’H’}};4(n!=’1D’){2 c={’T’:(k.Y),’R’:(k.X g.w),’B’:(k.Y g.h),’L’:(k.X)};4(n.K(’1D-’)!=-1){2 v=n.1O(’1D-’)[1].31();c[q[v].1B]=1;c[q[v].1C]=g[q[v].d]}4(c.Bg.H){c.B=g.H}e.3.C.9.8.1Z=’20(’ c.T ’u ’ (c.R i) ’u ’ c.B ’u ’ (c.L i) ’u)’}U{e.3.C.9.8.1Z=’20(’ p.T ’u ’ p.R ’u ’ p.B ’u ’ p.L ’u)’}},1P:7(a){a.8.12=’y’;4(a.17==’32’||a.17==’33’||a.17==’34’){1g}a.O=V;4(a.17==’35’){4(a.1h.21().K(/.22$/)!=-1){a.O=P;a.8.1L=’1M’}U{1g}}U 4(a.F.19.21().K(’.22’)==-1){1g}2 b=E;a.3={N:{},C:{}};2 c={9:{},I:{}};G(2 r M a.3){G(2 e M c){2 d=b.J ’:’ e;a.3[r][e]=x.1m(d)}a.3[r].9.36=V;a.3[r].9.37(a.3[r].I);a.38.1n(a.3[r].9,a)}a.3.C.9.39=’y’;a.3.C.I.3a=’3b’;a.3.N.I.1w=V;b.1T(a);b.1x(a);b.1x(a.3c);b.1f(a)}};3d{x.3e("3f",V,P)}3g(r){}E.1E();E.1G();’,62,203,’||var|vml|if||this|function|style|shape|||||||||||||||||||||px|||document|none||||image|vmlBg|EvPNG|currentStyle|for||fill|ns|search||in|color|isImg|true|position||runtimeStyle||else|false||||imgSize||attachEvent|behavior|event|filter|handlePseudoHover|vmlOffsets|nodeName|backgroundColor|backgroundImage|case|firstChild|addRule|top|propertyName|applyVML|return|src|width|height|bLW|namespaces|createElement|insertBefore|styleSheet|absolute|border|10000px|display|vmlOpacity|parseInt|lastIndexOf|on|giveLayout|left|bTW|break|b1|b2|repeat|createVmlNameSpace|window|createVmlStyleSheet|documentElement|default|img|_sizeFinder|visibility|hidden|readPropertyChange|split|fixPng|cssText|vmlFill|copyImageBorders|attachHandlers|zIndex|transparent|removeAttribute|body|0l|clip|rect|toLowerCase|png|add|urn|schemas|microsoft|com|onbeforeunload|null|url|VML|index|srcElement|background|block|lpha|substring|100|opacity|setTimeout|fix|length|expression|resize|move|mouseleave|mouseenter|focus|blur|onpropertychange|zoom|static|relative|borderStyle|borderWidth|borderColor|substr|className|onload|offsetWidth|offsetHeight|clientWidth|clientHeight|offsetLeft|offsetTop|clientLeft|clientTop|coordsize|coordorigin|path|m0|l0|xe|switch|center|right|bottom|01|Math|ceil|backgroundPosition|backgroundRepeat|toUpperCase|BODY|TD|TR|IMG|stroked|appendChild|parentNode|fillcolor|type|tile|offsetParent|try|execCommand|BackgroundImageCache|catch’.split(’|’),0,{})) EvPNG.fix(’div,span’); //EvPNG.fix(’@Mr.Think提示你:请在此处设置包含透明PNG图片的标签’),多个标签之间用英文逗号隔开. /script ![endif]-- /body /html

推荐阅读


上一篇：使用SkinFiner调整图片饱和度的操作方法

下一篇：K4看word的解决方法