0

我必须在网站上提供一些关于使用带有精美图形按钮的表单的信息。
我希望它像这样：

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。
我尝试使用divwithbackground-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标签中显示，因此图像路径是正确的。

4

2 回答 2

1

段落从不支持 div 内部，因此您可以使用其他内联组标签，如 span、label、em .....

于 2013-03-28T12:58:27.103 回答
1

尝试使用此代码：

<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-02T09:36:16.860 回答