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

Question

我正在寻找使用空白div元素来显示背景图像,但除非我在div元素中放入某些东西(即一些文本),否则什么都不显示.

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

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

我的Google-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;
}

Answer 1

试一试!

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

如果你使用a div代替span,你也需要设置display: inline样式.

Answer 2

你必须给div一个大小,否则它的大小为0px x 0px.

Answer 3

廉价的解决方法。在 div 中放置一个不间断空格 ( )。