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

如果您使用div代替span，则还需要在样式中设置display: inline。

Answer 2

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

Answer 3

廉价的解决方法。在div中放置一个非中断空格（＆amp; nbsp;）。

Answer 4

如果你不想要任何文字，这适用于Safari和Firefox（不测试IE）：

one | <span style="padding: 16px 16px 0 0; background: url('16x16-image.gif') no-repeat; font-size: 0"> </span> | three

Answer 5

背景应位于photoInfo div上，您可以使用background-position进行定位。你不能拥有0高度和宽度的背景。如果你增加它，虽然它会占用你设计的空间。

Answer 6

overflow:hidden可能有所帮助，或者为div分配长度和宽度。

总的来说，我认为还有其他方法可以达到你想要的效果。如果您只想将文本和图像水平对齐，则可以在不将图像放入div的情况下执行此操作。例如，您可以使用inline和float。

Answer 7

您是否尝试在不移动div的情况下移动背景图像？

尝试background-position: xpos ypos;

将其向下移动3个像素：background-position: 0px 3px;

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

7 个答案: