沿着文字的图像

我必须在网站上放置一些关于使用花哨图形按钮的信息。
我希望它是这样的：沿着文字的图像

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

沿着文字的图像

回答

相关问题