Html 背景图像未显示在 span 标签中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7582205/
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
Background image not showing up in span tag
提问by Liam
Im having trouble with a span tag showing a background image in the latest FF on windows 7. It seems to work and show everything fine in earlier FF, Chrome, Safari and IE but handheld devices and windows 7 it seems to fail.
我在 Windows 7 上的最新 FF 中使用 span 标签显示背景图像时遇到问题。它似乎在早期的 FF、Chrome、Safari 和 IE 中工作并显示一切正常，但手持设备和 Windows 7 似乎失败了。
Sorry if this seems vague I just cant figure it out, the images were originally pngs with no height specified and ive since made them gifs and applied a height.
抱歉，如果这看起来含糊不清，我只是想不通，这些图像最初是没有指定高度的 png，并且我已经将它们制作为 gif 并应用了高度。
<span class="design">Design Viz</span>
<style>
.design {
background:url(_includes/images/agenda-design.gif) no-repeat top left;
display: inline-block;
height: 17px;
padding-left:25px;
}
</style>
回答by Victor Ni?u
The background-image CSS property only puts an image as the background. The width and height of an object is always defined either by static settings via CSS/inline styling, or by the actual size of the content displayed in it. In your case, since you haven't added any content between your tags, its x/y dimensions will be 0, but there is no bug with the background. It's there, only you can't see it unless you define (somehow) a size for the element.
background-image CSS 属性仅将图像作为背景。对象的宽度和高度始终由通过 CSS/内联样式的静态设置定义，或者由其中显示的内容的实际大小定义。在您的情况下，由于您尚未在标签之间添加任何内容，因此其 x/y 尺寸将为 0，但背景没有错误。它就在那里，只有你不能看到它，除非你定义（以某种方式）元素的大小。
<span class="design">Design Viz</span>
.design {
padding-left:25px;
background:url(_includes/images/agenda-design.gif) no-repeat top left;
display: inline-block;
height: 17px;
width: 50px;
}
Where 50 can be any helpful value suited for your case.
其中 50 可以是适合您情况的任何有用值。
回答by GDW
display:inline-block; is not supported by IE7. You can fix it by adding:
显示：内联块；IE7 不支持。您可以通过添加以下内容来修复它：
.design {
padding-left:25px;
background:url(_includes/images/agenda-design.gif) no-repeat top left;
display: inline-block;
height: 17px;
width: 50px;
zoom: 1;
*display:inline;
}
回答by Edmund Lee
You cannot set attributes no-repeat top leftif you declare background-image. In background-imageyou must only set the link to your image.
no-repeat top left如果您声明 background-image，则无法设置属性。在background-image您必须只设置链接到您的图像。
Or you could use backgroundlike this:
或者你可以这样使用background：
background: url(...) no-repeat top left
回答by Pankaj Upadhyay
use padding like
使用填充像
padding-left:25px;
padding-top: 6px;
padding-bottom: 10px;
padding-right: 5px;
回答by Christian
Add width: 17px to your css style too (or whatever width it is)
也将 width: 17px 添加到您的 css 样式（或任何宽度）
