css - background-position截取圖片后會有個邊框去不掉
問題描述
.srcImg{ position: absolute; background: url(/Users/ShareAnimation/Desktop/23456.png); background-repeat: no-repeat;/*設(shè)置及是否重復(fù)原圖,比如repeat-x表示在水平方向重復(fù)*/ width: 22px; height: 22px;/*根據(jù)定位的位置,然后選取一個width,height的矩形*/ left: 10px; top: 10px; cursor: pointer; /*光標(biāo)類型,這里為小手*/outline: none; /*變寬樣式,none表示無邊框*/ z-index: 1000; /*元素堆疊順序*/ background-position: -27px -200px; /*定位圖像某一位置*/}<img class='srcImg'>
我的樣式代碼是這樣的,截取后的效果圖如下:
這個邊框我設(shè)置border:none,outline:none都沒有效果,這是為啥呢?
問題解答
回答1:我也遇到過著個問題的,你要把圖片設(shè)置的boder屬性也要初始化一下.還有補(bǔ)充一點(diǎn),如果你圖片沒有插入,或者路徑出錯,它是會有那個邊框的,你設(shè)置boder:none也是毫無作用的(估計瀏覽器是為了占位吧),反正目前我所看到的圖片都有這樣一種情況,一些大網(wǎng)站的圖片加載錯誤的時候也是會有那個邊框的。你這里的圖片沒有src,用的是背景填圖的方式,瀏覽器默認(rèn)為你的img沒有src,這上面的一個方可有效http://bbs.csdn.net/topics/39...給你的img標(biāo)簽加上src,引入一個空白圖src='http://www.xcwljy.cn/images/pixel.gif',然后就解決了
回答2:為什么不是這個圖里本身有一個border 呢
border: 0 !important;
相關(guān)文章:
1. css - chrome下a標(biāo)簽嵌套img 顯示會多個小箭頭?2. sql語句 - mysql中關(guān)聯(lián)表查詢問題3. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?4. javascript - [js]為什么畫布里不出現(xiàn)圖片呢?在線等5. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風(fēng)格檢查怎么辦。。。6. javascript - 如何將一個div始終固定在某個位置;無論屏幕和分辨率怎么變化;div位置始終不變7. html - vue項目中用到了elementUI問題8. javascript - iframe 為什么加載網(wǎng)頁的時候滾動條這樣顯示?9. javascript - 求解答:實例對象調(diào)用constructor,此時constructor內(nèi)的this的指向?10. javascript - 有什么比較好的網(wǎng)頁版shell前端組件?
