css – 使背景图像显示在一个空白的div元素中

前端之家收集整理的这篇文章主要介绍了css – 使背景图像显示在一个空白的div元素中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用一个空白的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;
}

解决方法

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

如果您使用div而不是span,则需要在样式中设置display:inline.

猜你在找的CSS相关文章