如何在CSS中移除圖像邊框？

當鼠標光標位於幫助圖標上時，我嘗試顯示一個範圍。如何在CSS中移除圖像邊框？

它的工作原理，但是，我不設法刪除圖標周圍的邊框。

我的CSS：

.info{ 
    position:absolute; 
    border:none; 
} 

a.info{ 
    position:absolute; 
    z-index:24; 
    background:none; 
    color:#000; 
    text-decoration:none 
} 

a.info:hover{ 
    z-index:25; 
    background-color:#FFF; 
    cursor:help; 
} 

a.info span{ 
    display: none 
} 

a.info:hover span{ 
    display:block; 
    position:absolute; 
    cursor:help; 
    bottom:0px; 
    left:26px; 
    width:150px; 
    padding:4px; 
}

來源

2010-01-28 bahamut100

如果你想刪除的圖像周圍的邊框，你爲什麼不只是刪除圖像周圍的邊界？ '.info img {}' – Boldewyn 2010-01-28 09:26:00

嘗試使用'div'代替'img'標籤 – 2013-07-22 09:48:37

[可能內部有獲取藍色邊框]（http://stackoverflow.com/questions/2922858/img-inside-a-得到藍色邊界） – 2013-12-29 23:33:00

試試這個：

img{border:0;}

您也可以limitate範圍，只有這樣做去除一些圖像邊界：

.myClass img{border:0;}

更多信息有關邊界CSS屬性的信息可以通過找到 here。

編輯：將邊框從0px更改爲0。正如評論中所解釋的，px對於0單元是多餘的。

來源

2010-01-28 09:26:36 marcgg

我打算在某處使用「限制」。 – random 2010-01-28 09:35:44

'border：0px'是去除邊框的方法（而不是'border：none'）！ – Veger 2010-01-28 10:04:30

在優化邊界方面：0不需要'px' – guzart 2010-01-28 10:57:12

你在圖片標籤上有什麼課程？

試試這個

<img src="/images/myimage.jpg" style="border:none;" alt="my image" />

來源

2010-01-28 09:27:17 Andrew

-1

我相信你需要的邊框添加：無風格，你的圖標元素爲好。

來源

2010-01-28 09:27:25

也許添加border:none下a.info:hover span或text-decoration:none

來源

2010-01-28 09:27:28 jkeesh

我通常使用的CSS文件的頂部。

img { 
    border: none; 
}

來源

2010-01-28 09:28:53

不知道爲什麼這個答案downvoted，請考慮留下評論，當你downvote一個答案。順便說一句，'0'和'none'都是完全有效的。 – 2014-10-20 11:03:50

downvoted，因爲它的錯誤答案。檢查示例並在發佈之前嘗試itseld。「Border：none」在這裏對於這個奇怪的事件是無用的 – denismart 2017-12-05 16:49:38

@denismart怎麼會這樣？接受的答案實際上是相同的。 – 2018-01-01 17:00:13

感謝答案，

邊界是「消滅」 IE下（我的英語對不起），但FF下，它仍然一次。所以，我試試這個：

.clearBorder {border：none;}我將這個類添加到img中，並且它是規則的。

來源

2010-01-28 09:34:57 bahamut100

這是一個好主意，使用重置CSS。在你的CSS文件的頂部添加此

img, a {border:none, outline: none;}

希望這有助於

來源

2010-01-29 13:56:37 pixeltocode

我意識到這是一個非常古老的職位，但我遇到過類似的問題，在我的顯示圖像總是有它周圍的邊框。我試圖用單個圖像填充瀏覽器窗口。添加邊框樣式：無;沒有刪除邊界，邊界也沒有：0;或填充：0;或三者的任何組合。

但是，添加位置：absolute; top：0; left：0;解決了這個問題。

上面的原帖有position：absolute;但沒有top：0; left：0;這是在我的頁面上添加一個默認邊框。

爲了說明的解決方案，這有一個白色的邊界（準確地說，它具有一個頂部和左側偏移）：

<img src="filename.jpg" 
style="width:100%;height:100%;position:absolute;">

這不具有邊框：

<img src="filename.jpg" 
style="width:100%;height:100%;position:absolute;top:0;left:0;">

希望這有助於有人找到這個職位尋找解決類似的問題。

來源

2014-05-13 02:41:31

另一件事 - 記住，如果你有一個與空src屬性，那麼這些建議都將工作，邊框仍然會得到顯示。

<img src="" style="width:30px;height:30px;">

來源

2014-08-18 12:23:08

也src =「」將導致一個好的瀏覽器再次向您的頁面發出請求，因爲它是簡短的請求當前網址與圖片的接受標頭。 – Jeff 2014-08-20 21:17:48

IMG需要的src使用邊境卸妝，我不知道爲什麼CSS是瘋狂

data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7

因此，嘗試例如與SRC：

img.logo { 
 
\t width: 200px; 
 
    height: 50px; 
 
\t background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left; 
 
}

<img class="logo" src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7">

所以儘量不用例如SRC：

img.logo { 
 
\t width: 200px; 
 
    height: 50px; 
 
\t background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left; 
 
}

<img class="logo">

笑... CSS瘋了！好開心

來源

2015-11-30 13:29:43 KingRider

這是爲我工作的唯一解決方案。謝謝 – 2017-11-13 15:36:50

這裏是我是怎麼擺脫我的：

.main .row .thumbnail { 
    display: inline-block; 
    border: 0px; 
    background-color: transparent; 
}

來源

2016-08-05 15:36:17

請解釋你的代碼並將其格式化！ – andreas 2016-08-05 15:59:42

<img id="instapic01" class="samples" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

來源

2016-11-19 10:27:09

如何在CSS中移除圖像邊框？

回答

相關問題