css - 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。例如，如果您希望背景距左侧 10 像素，距顶部 20 像素，您可以编写：

background-position:10px 20px;

Answer 2

索提里斯说的是对的。但你也可以这样做：

.ico_person { background-position: right center; }

但是，就将图像放在文本旁边而不是在其后面而言，您应该padding-right对您的样式有所了解。所以例如：

.ico_person { padding-right:20px; }

相应地减少/增加填充。