兼容IE6的图片圆角边框CSS

2024-07-11 08:26:35

字体：大中小

来源：转载

供稿：网友

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

复制代码

代码如下:
.i_roundimg{ background:url(http://www.vevb.com/uploads/allimg/190316/1333136341-1.png) no-repeat;cursor:pointer;width:60px;height:60px;position:absolute;}

DEMO用到的PNG背景图片:

<!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.vevb.com/uploads/allimg/190316/1333136341-1.png) no-repeat;cursor:pointer;width:60px;height:60px;position:absolute;} /*如果只有一处用到PNG背景可以用以下代码 .box li .i_roundimg{ background:url(http://www.vevb.com/uploads/allimg/190316/1333136341-1.png) no-repeat;_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.vevb.com/uploads/allimg/190316/1333136341-1.png',sizingMethod='scale');cursor:pointer;width:60px;height:60px;position:absolute;} */ </style> </head> <body> <h1><a href="http://mrthink.net/">Mr.Think的个人博客</a>@专注前端技术,热爱PHP,崇尚简单生活.</h1> <h2>兼容IE6的图片圆角边框@Mr.Think,支持可恨可恶的万万人诅咒的IE6哦~</h2> <ol class="box"> <li><a target="_blank" href="http://mrthink.net/"><span class="i_roundimg"></span><img src="http://www.vevb.com/uploads/allimg/190316/13331325J-2.gif" width="60" height="60"></a></li> <li><a target="_blank" href="http://mrthink.net/"><span class="i_roundimg"></span><img src="http://www.vevb.com/uploads/allimg/190316/13331325J-2.gif" width="60" height="60"></a></li> <li><a target="_blank" href="http://mrthink.net/"><span class="i_roundimg"></span><img src="http://www.vevb.com/uploads/allimg/190316/13331325J-2.gif" width="60" height="60"></a></li> <li><a target="_blank" href="http://mrthink.net/"><span class="i_roundimg"></span><img src="http://www.vevb.com/uploads/allimg/190316/13331325J-2.gif" width="60" height="60"></a></li> <li><a target="_blank" href="http://mrthink.net/"><span class="i_roundimg"></span><img src="http://www.vevb.com/uploads/allimg/190316/13331325J-2.gif" width="60" height="60"></a></li> </ol>   </body> </html>

上一篇：CSS中视觉语义不等于基于表现的类

下一篇：css外部样式加载Link与import的区别

发表评论

共有条评论