如何刪除圖像精靈中的邊框

邊框不會在下面的代碼中刪除，即圖像精靈。我已經嘗試過使用樣式和邊框0去除邊框的一些方法，但沒有用。如何刪除圖像精靈中的邊框

<style> 
img.home{width:40px;height:32px; 
background:url(share.png) 0 0; 
border-style: none;} 
img.next{width:40px; 
height:32px;background:url(share.png) -36px 0; 
border-style:none;} 
</style> 
<a href="http://www.yahoo.com/"> 
<img class="home" border="0"> 
</a> 
<img class="next" border="0"/>

JSFIDDLE

來源

2012-07-09 PHP

你嘗試'邊界：none'？ – 2012-07-09 01:41:08

雅http://jsfiddle.net/GB54f/1/ – PHP 2012-07-09 01:44:10

圖片都配有默認邊框，該圖像被下載時只將消失。該圖像來自圖像的src屬性。如果沒有設置src，那麼圖像將不會被下載，並且邊框將永遠存在 - 您的案例。

正常img標籤看起來是這樣的：

<img src="/something.jpg" />

你看起來是這樣的：

<img />

你通過CSS的背景圖像添加圖像。不應該這樣做。您可以添加背景圖片，但通常用於其他目的。（檢查底部的旁邊）。

嘗試刪除背景圖像並將圖像位置放置在圖像的src屬性上。像這樣：

<img class="next" src="/share.png" />

您會看到圖像現在沒有邊框。

除了當背景圖像被添加到一個img元素，這是通常當沒有IMG src設置爲提供一個佔位符圖像。想一想博客評論部分的頭像。

此外當創建一個精靈，你可以使用div小號p小號em小號等等記住，background-image可以應用到任何元素！

來源

2012-07-09 01:34:01 banzomaikaka

它不工作http://jsfiddle.net/GB54f/1/ – PHP 2012-07-09 01:43:34

檢查我的編輯。 – banzomaikaka 2012-07-09 01:49:28

不起作用：http://jsfiddle.net/GB54f/10/ – 2012-07-09 01:50:02

找到了它，JOPLOmacedo是正確的，但你不必刪除背景，只需使用src標籤。 JSFIDDLE。（很抱歉的圖像，但我需要他們來測試src）

HTML：

<a href="http://www.yahoo.com/"> 
<img class="home" src="http://jsfiddle.net/img/logo.png" border="0"/> 
</a> 
<img class="next" src="http://jsfiddle.net/img/social-icons/facebook_16.png" border="0"/>

CSS：

img.home{width:40px;height:32px; 
border: none; background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) 0 0;} 
img.next{width:40px; 
height:32px; 
border:none; float: right; 
background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) -36 0;}

來源

2012-07-09 02:00:31

我沒有說你必須刪除背景。我建議刪除這個圖像，因爲他不需要它來做他想做的事情。我在底部甚至建議在img元素上使用背景圖像。 – banzomaikaka 2012-07-09 02:05:46

是的，抱歉發佈之前，我看到了 – 2012-07-09 02:06:33

假設你的HTML標記<img class="somthing" />和在類「東西」你已經定義了圖像的背景位置。

當您從圖像精靈中更精確地選擇圖像所在的特定圖像時。您的課堂適合使用css中的背景位置獲取圖片。

刪除邊框的簡單方法是將img標記設置爲div。

如果您根據背景位置獲取圖像，爲什麼需要使用img標記。

只寫HTML一樣...... <div class="next" ..>

來源

2014-07-23 12:57:46

你可以使用一個base64很小的透明圖片，如果你不會使用一個外部文件

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

來源

2014-10-31 13:40:50 Francesco

如何刪除圖像精靈中的邊框

回答

相關問題