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

【问题标题】：CSS - Positioning BG Image from Overlapping TextCSS - 从重叠文本定位 BG 图像
【发布时间】：2012-12-27 08:25:25
【问题描述】：

我想以不同的方式定位下方的 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>

如果图像是背景，我能否将其准确定位在我需要的位置？还是 background-image 会在某些范围内阻止它？

【问题讨论】：

我不太明白你的问题？您能否发布当前和期望结果的图片？
添加了我所拥有的快照。我想将图标向右移动，并在文本上方

标签： css positioning background-image

【解决方案1】：

您可以使用background-position 设置背景的水平和垂直位置。例如，如果您希望背景距左侧 10 像素，距顶部 20 像素，则您可以编写：

background-position:10px 20px;

【讨论】：

这仍然将图像保留在跨度后面，如果我将其放置得太远，它就会完全看不见
coffeemonitor 可能您可以为指定的span 添加padding-right:20px 以将图标放置在您拥有的文本之后。

【解决方案2】：

Sotiris 说的是对的。但你也可以这样做：

.ico_person { background-position: right center; }

但就在文本旁边而不是在其后面放置图像而言，您应该为您的样式添加一些padding-right。例如：

.ico_person { padding-right:20px; }

相应地减少/增加内边距。

【讨论】：