Css 获取要在空白div元素中显示的背景图像

我希望使用一个空白的div元素来显示背景图像，但除非我在div元素中放入一些内容（例如，一些文本），否则不会显示任何内容

我需要这样做，因为我想在一些文本旁边显示一个图形，但要使图形与文本垂直对齐

如何让背景图像显示在空白div中

我的谷歌fu让我失望了

<div class="photoInfo">
lorem ipsum | 
<div style="background:url('foo.gif') no-repeat;display:inline;"></div>
</div>

同侧眼

谢谢

编辑： 下面的代码实际上显示了图像，但我只需要将其像2或3个像素一样向下划，使其完全对齐

这就是我想要实现的，有什么想法吗

<div class="photoInfo">
    Added<span class="spacer">•</span>Wed Apr 01, 2009 1:01 pm<span class="spacer">•</span>64.10 KB<span class="spacer">•</span>659x878 pixels
    <span class="spacer">•</span>
    <img src="/_assets/img/icons/new-photo-small.gif" />
</div>
<!--<div style="height:14px;width:31px;background:url('') no-repeat 0px 5px;display:inline-block;"></div>-->

.photoInfo
{
font-size:0.6em;
color:#b0bad9;
padding-bottom:15px;
text-align:center;
}

新增•2009年4月1日星期三下午1:01•64.10 KB•659x878像素
•
.photoInfo
{
字号：0.6em；
颜色：#b0bad9；
垫底：15px；
文本对齐：居中；
}

背景应位于photoInfo

div

上，您可以使用

背景位置对其进行定位。高度和宽度为0的对象上不能有背景。如果你增加它，它会占用你的设计空间。
溢出：隐藏可能会有帮助，或者为div指定一个长度和宽度

总的来说，我认为还有其他方法可以实现你想要的。如果您只想让文本和图像水平对齐，则无需将图像放入
div
。例如，您可以使用
inline
和
float
您必须为div指定一个大小，否则其大小为0px x 0px。
廉价的解决方法。在div中放置一个非中断空格（）。
尝试一下

one | <span style="padding-left: 20px; background: url('16x16-image.gif') no-repeat; height: 16px">two</span> | three

1 | 2 | 3

如果您使用
div
而不是
span
，则还需要在样式中设置
display:inline
。
如果您不需要任何文本，这在Safari和Firefox中有效（未测试IE）：

one | | three
是否尝试在不移动div的情况下移动背景图像

尝试
背景位置：xpos-ypos

将其向下移动3像素：
背景位置：0px 3px
我也试过了。photoInfo div元素是容器宽度的100%，因此，如果我指定“不重复”和“左”或“右”，则当文本居中时，它位于屏幕的最左侧或右侧。我需要它直接位于居中文本的右侧。我尝试给div提供图像的尺寸，但这不起作用。问题是文本位于div元素中，该元素的宽度为屏幕容器的100%。文本也居中，我需要图像直接在文本的右侧，垂直对齐。浮动它L或R将无助于在图像样式或图像本身中添加填充或边距…然后将文本和图像包装在一个div中，然后在页面中居中我在顶部添加了更多信息，我认为这可以更好地解释我遇到的问题。如果我去掉display:inline元素，div元素与我试图对齐的文本不在同一行上显示。你说得对——我用一个适合你的方法更新了它。（我应该添加另一个答案吗？）这会起作用，但是文本“two”显示，我想我可以使文本与背景颜色相同？如果您将padding right元素设置为您试图显示的图像的宽度，您的解决方案就会起作用。不需要线条高度元素。谢谢