css - 获取背景图像以显示在空白 div 元素中

Question

我想使用一个空白的 div 元素来显示背景图像，但除非我在 div 元素中放置一些东西(即一些文本)，否则不会显示任何内容。

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

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

我的谷歌失败了。

<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;
}

Answer 1

试一试!

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

如果您使用 div而不是 span , 你需要设置 display: inline在风格上也是如此。