CSS 获取背景图像以显示在空白 div 元素中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/711265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting a background image to display in a blank div element
提问by Tom
I'm looking to use a blank div element to display a background image but nothing is displaying unless I put something (i.e., some text) in the div element.
我希望使用一个空白的 div 元素来显示背景图像，但除非我在 div 元素中放入一些东西（即一些文本），否则什么都不会显示。
I need to do this because I want to display a graphic next to some text but have the graphic vertically aligned with the text.
我需要这样做是因为我想在一些文本旁边显示一个图形，但使图形与文本垂直对齐。
How do you get a background image to display in a blank div?
如何让背景图像显示在空白 div 中？
My Google-fu has failed me.
我的 Google-fu 让我失望了。
<div class="photoInfo">
lorem ipsum |
<div style="background:url('foo.gif') no-repeat;display:inline;"></div>
</div>
Thanks!
谢谢！
edit: The code below actually displays the image but I just need to nick it down like 2 or 3 pixels to have it perfectly aligned.
编辑：下面的代码实际上显示了图像，但我只需要将其切割成 2 或 3 个像素即可使其完美对齐。
That's what I'm trying to achieve, any ideas?
这就是我想要实现的目标，有什么想法吗？
<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;
}
采纳答案by jyustman
Give this a shot!
试一试！
one | <span style="padding-left: 20px; background: url('16x16-image.gif') no-repeat; height: 16px">two</span> | three
If you use a divinstead of span, you'll need to set display: inlinein the style as well.
如果您使用 adiv而不是span，则还需要display: inline在样式中进行设置。
回答by Mork0075
You have to give the div a size, otherwise its size its 0px x 0px.
你必须给 div 一个大小，否则它的大小是 0px x 0px。
回答by tpdi
Cheap work-aroound. put a non-break space ( ) in the div.
廉价的解决方法。在 div 中放置一个不间断空格 ( )。
回答by jyustman
If you don't want any text, this works in Safari and Firefox (didn't test IE):
如果您不想要任何文本，这适用于 Safari 和 Firefox（未测试 IE）：
one | <span style="padding: 16px 16px 0 0; background: url('16x16-image.gif') no-repeat; font-size: 0"> </span> | three
one | <span style="padding: 16px 16px 0 0; background: url('16x16-image.gif') no-repeat; font-size: 0"> </span> | three
回答by Shawn
The background should be on the photoInfo div, and you can position it with background-position. You can't have a background on something that is 0 height and width. If you increase it though it will take up space on your design.
背景应该在 photoInfo 上div，您可以使用background-position. 你不能有高度和宽度为 0 的东西的背景。如果你增加它，虽然它会占用你的设计空间。
回答by markus
overflow:hiddenmight help, or assigning a length and a width to the div.
overflow:hidden可能会有所帮助，或者为 div 分配长度和宽度。
In general, I would think there are other ways of achieving what you want. If you just want to have a text and an image horizontally aligned you can do that without putting the image into a div. For example, you could use inlineand float.
总的来说，我认为还有其他方法可以实现你想要的。如果您只想将文本和图像水平对齐，则无需将图像放入div. 例如，您可以使用inline和float。
回答by Jesse Brown
Are you trying to move the background image without moving the div?
您是否试图在不移动 div 的情况下移动背景图像？
Try background-position: xpos ypos;
尝试 background-position: xpos ypos;
To move it down 3 pixels: background-position: 0px 3px;
将其向下移动 3 个像素： background-position: 0px 3px;
