CSS - 从重叠文本定位BG图像

Question

我想以不同的方式定位下面的16x16图标。 我想将它们自动定位在文本的右侧，而不是文本的后面。 另外，我想将图标略微移动几个像素。

这是我的代码的结果：

<span class="ico_person">John Smith</span>
<span class="ico_phone">1-555-555-5555</span>
<span class="ico_email">somewhere@someplace.com</span>

以下是一种风格：

<style>
.ico_person {
  color:#067CEA;
cursor:pointer;
font-weight:bold;
background-color:#F6F6F6;

background-image:url("/images/icons/icon_admins.png");
background-repeat:no-repeat;
background-position:1px 5px;
padding: 3px;
border-radius:3px 0 3px 3px;
border: 1px solid #CCCCCC;

}
</style>

如果图像是背景，我能将它准确定位在我需要的位置吗？ 或者背景图像是否在某些边界内停止了？

Answer 1

您可以使用background-position设置背景的水平和垂直位置。例如，如果你想要左边的背景10px和顶部的20，你可以写：

background-position:10px 20px;

Answer 2

Sotiris所说的是正确的。但你也可以这样做：

.ico_person { background-position: right center; }

但是，只要将图像放在文本旁边而不是文本背后，您应该将padding-right设置为您的样式。例如：

.ico_person { padding-right:20px; }

相应地减少/增加填充。