css - background-position截取圖片后會(huì)有個(gè)邊框去不掉
問(wèn)題描述
.srcImg{ position: absolute; background: url(/Users/ShareAnimation/Desktop/23456.png); background-repeat: no-repeat;/*設(shè)置及是否重復(fù)原圖,比如repeat-x表示在水平方向重復(fù)*/ width: 22px; height: 22px;/*根據(jù)定位的位置,然后選取一個(gè)width,height的矩形*/ left: 10px; top: 10px; cursor: pointer; /*光標(biāo)類(lèi)型,這里為小手*/outline: none; /*變寬樣式,none表示無(wú)邊框*/ z-index: 1000; /*元素堆疊順序*/ background-position: -27px -200px; /*定位圖像某一位置*/}<img class='srcImg'>
我的樣式代碼是這樣的,截取后的效果圖如下:
這個(gè)邊框我設(shè)置border:none,outline:none都沒(méi)有效果,這是為啥呢?
問(wèn)題解答
回答1:我也遇到過(guò)著個(gè)問(wèn)題的,你要把圖片設(shè)置的boder屬性也要初始化一下.還有補(bǔ)充一點(diǎn),如果你圖片沒(méi)有插入,或者路徑出錯(cuò),它是會(huì)有那個(gè)邊框的,你設(shè)置boder:none也是毫無(wú)作用的(估計(jì)瀏覽器是為了占位吧),反正目前我所看到的圖片都有這樣一種情況,一些大網(wǎng)站的圖片加載錯(cuò)誤的時(shí)候也是會(huì)有那個(gè)邊框的。你這里的圖片沒(méi)有src,用的是背景填圖的方式,瀏覽器默認(rèn)為你的img沒(méi)有src,這上面的一個(gè)方可有效http://bbs.csdn.net/topics/39...給你的img標(biāo)簽加上src,引入一個(gè)空白圖src='http://www.xcwljy.cn/images/pixel.gif',然后就解決了
回答2:為什么不是這個(gè)圖里本身有一個(gè)border 呢
border: 0 !important;
相關(guān)文章:
1. docker - 如何修改運(yùn)行中容器的配置2. javascript - log4js的使用問(wèn)題3. angular.js - angular ng-class里面的引號(hào)問(wèn)題4. javascript - Web微信聊天輸入框解決方案5. javascript - history.replaceState()無(wú)法改變query參數(shù)6. javascript - Ajax加載Json時(shí),移動(dòng)端頁(yè)面向左上角縮小一截兒,加載完成后才正常顯示,這該如何解決?7. javascript - 移動(dòng)端textarea不能上下滑動(dòng),該怎么解決?8. css - 對(duì)于類(lèi)選擇器使用的問(wèn)題9. javascript - 為什么form表單提交沒(méi)有跨域問(wèn)題,但ajax提交有跨域問(wèn)題?10. javascript - 為什么這個(gè)點(diǎn)擊事件需要點(diǎn)擊兩次才有效果
