您现在的位置是：网站首页> 编程资料编程资料

兼容IE6的图片圆角边框CSS_CSS教程_CSS_网页制作_

2023-10-30 188人已围观

简介 纯CSS实现的图片圆角边框效果,兼容IE6.

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

复制代码
代码如下:

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

DEMO用到的PNG背景图片:


提示：您可以先修改部分代码再运行

另外附上两种解决IE6下PNG图片的方案:
JavaScript让IE6识别PNG(适应性强,适应于背景PNG和页面中的PNG):

复制代码
代码如下:

eval(function(p,a,c,k,e,r){e=function(c){return(c35?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;i

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网