沿着文字的圖像

我必須在網站上放置一些關於使用花哨圖形按鈕的信息。
我希望它是這樣的：沿着文字的圖像

To show info press <info buttton icon>, to configure preferences press <preferences button icon>.

和圖標由圖標排列在一個大的文件圖標。
因此，例如<info buttton icon>來自icons.png文件並且具有偏移量（20px，20px）和<preferences button icon>來自同一個文件並且具有偏移量（20px，40px）。
我可以使用純HTML和CSS。
我試圖用div與background-position屬性，但div不能在段落內。

我會爲任何解決方案或提示如何實現這一點偉大。

編輯：讀響應之後我用下面的代碼：

<p>To show info press 
<span style="background: url(./img/icons.png); height: 18px; width: 18px;"></span> 
, to configure preferences press 
<span style="background: url(./img/icons.png); height: 18px; width: 18px; background-position: -18px 0px !important;"></span></p> 
<img src="./img/icons.png">

圖標在跨度沒有顯示（跨度是不可見的，只是文本），但也有在img標籤所示，這樣的路徑圖像是正確的。

來源

2013-03-28 Michał Herman

使用'span'代替'div' – Uby

@Uby - 你能告訴我如何使用'span'來實現結果。我用我的基於span的解決方案更新了我的答案，但它不起作用。 –

我剛發佈了一個答案 – Uby

嘗試使用此代碼：

<p>To show info press 
<span style="background: url(./img/icons.png); height: 18px; width: 18px; display:inline-block"></span> 
, to configure preferences press 
<span style="background: url(./img/icons.png); height: 18px; width: 18px; background-position: -18px 0px !important; display:inline-block"></span></p> 
<img src="./img/icons.png">

來源

2013-04-02 09:36:16 Uby

款從未支持一個div裏面，這樣你們能給我們其他內聯組標籤一樣跨度，標籤，EM .....

來源

2013-03-28 12:58:27

沿着文字的圖像

回答

相關問題