Question

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

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标记中显示，因此图像路径正确。

Answer 1

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

Answer 2

尝试使用此代码：

<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">

图像沿文本

2 个答案: