兼容IE6的圖片圓角邊框CSS

2024-07-11 08:26:35

字體：大中小

供稿：網(wǎng)友

實(shí)現(xiàn)原理很簡(jiǎn)單,利用絕對(duì)定位,使一個(gè)背景為PNG圖片的邊框覆蓋在原始圖片上面.而兼容IE6,本文用的是一段JS來(lái)讓萬(wàn)惡的萬(wàn)萬(wàn)人詛咒的IE6識(shí)別PNG圖片的.當(dāng)然,你還可以用濾鏡的方式讓IE6實(shí)現(xiàn)PNG效果.本文后面我會(huì)附上兩種解決方案.個(gè)人比較推崇用JS來(lái)實(shí)現(xiàn)IE6PNG,適應(yīng)性比較強(qiáng),但如果你只有一兩處用到PNG,完全可以用濾鏡的方式來(lái)實(shí)現(xiàn).
核心CSS代碼:

復(fù)制代碼

代碼如下:
.i_roundimg{ background:url(http://www.survivalescaperooms.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.survivalescaperooms.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.survivalescaperooms.com/uploads/allimg/190316/1333136341-1.png) no-repeat;_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.survivalescaperooms.com/uploads/allimg/190316/1333136341-1.png',sizingMethod='scale');cursor:pointer;width:60px;height:60px;position:absolute;} */ </style> </head> <body> <h1><a >Mr.Think的個(gè)人博客</a>@專(zhuān)注前端技術(shù),熱愛(ài)PHP,崇尚簡(jiǎn)單生活.</h1> <h2>兼容IE6的圖片圓角邊框@Mr.Think,支持可恨可惡的萬(wàn)萬(wàn)人詛咒的IE6哦~</h2> <ol class="box"> <li><a target="_blank" ><span class="i_roundimg"></span><img src="http://www.survivalescaperooms.com/uploads/allimg/190316/13331325J-2.gif" width="60" height="60"></a></li> <li><a target="_blank" ><span class="i_roundimg"></span><img src="http://www.survivalescaperooms.com/uploads/allimg/190316/13331325J-2.gif" width="60" height="60"></a></li> <li><a target="_blank" ><span class="i_roundimg"></span><img src="http://www.survivalescaperooms.com/uploads/allimg/190316/13331325J-2.gif" width="60" height="60"></a></li> <li><a target="_blank" ><span class="i_roundimg"></span><img src="http://www.survivalescaperooms.com/uploads/allimg/190316/13331325J-2.gif" width="60" height="60"></a></li> <li><a target="_blank" ><span class="i_roundimg"></span><img src="http://www.survivalescaperooms.com/uploads/allimg/190316/13331325J-2.gif" width="60" height="60"></a></li> </ol>   </body> </html>

上一篇：CSS中視覺(jué)語(yǔ)義不等于基于表現(xiàn)的類(lèi)

下一篇：css外部樣式加載Link與import的區(qū)別

發(fā)表評(píng)論

共有條評(píng)論