Html CSS 谜题：如何添加背景图像并在空跨度上设置高度/宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4716284/
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
CSS puzzle: How to add background-image and set height/width on empty span?
提问by AP257
I've set background-imageon a couple of spanelements, but they aren't showing up, I think because my heightand widthsettings are being ignored.
我已经设置background-image了几个span元素，但它们没有出现，我想是因为我的height和width设置被忽略了。
HTML source:
HTML 源代码：
<div class="textwidget">
<a href="#" title="Start here"><span id="starthere" class="sidebar-poster"></span></a>
<a href="#" title="Primary documents"><span id="#primarydocs" class="sidebar-poster"></span></a>
<a href="#" title="Donate"><span id="donate" class="sidebar-poster"></span></a>
</div>
CSS:
CSS：
span.sidebar-poster {
margin-bottom: 10px;
background-repeat: no-repeat;
width: 160px;
}
span#starthere {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#starthere:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#primarydocs {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#primarydocs:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#donate {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg);
height: 285px;
}
span#donate:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg);
}
None of the background images are actually visible.
没有任何背景图像实际上是可见的。
In Chrome Developer Tools, Under Computed Style, these two spans do appear to have a background image. If I copy and paste the URL of this image, I see the image. Yet nothing is actually rendering.
在 Chrome 开发者工具中，在 Computed Style 下，这两个 span 看起来确实有一个背景图像。如果我复制并粘贴此图像的 URL，我会看到该图像。然而实际上没有什么是渲染的。
[UPDATE - this part is solved, thanks]In Chrome Developer Tools, under Matched Rules, only the #starthereand #donatespans are actually picking up the background-imageattribute. The #primarydocsspan is not. Why not?
[更新 - 这部分已解决，谢谢]在 Chrome 开发者工具中，在匹配规则下，只有#starthere和#donate跨度实际上正在拾取background-image属性。该#primarydocs跨度不大。为什么不？
采纳答案by Marnix
SPANis an inline element. Which will indeed ignore such things. Try setting the display mode in your CSS to something like: display: block;
SPAN是一个内联元素。这确实会忽略这些事情。尝试将 CSS 中的显示模式设置为：display: block;
回答by Ulrich Schwarz
I think your spans need to have display:inline-block, an ordinary span will always have its 'natural' width and height.
我认为你span需要有display:inline-block，一个普通的跨度总是有它的“自然”宽度和高度。
回答by Adrian
Since a is display: inline;automatically it cannot take widthand heightattributes from CSS.
由于 a 是display: inline;自动的，它不能从 CSS 中获取width和height属性。
If you want to use the inlinecharacteristic but without inner content (ie: <span>content</span>) and instead have a background image, use paddinginstead.
如果您想使用inline特征但没有内部内容（即：<span>content </span>）而是使用背景图像，请padding改用。
ie:
IE：
span {
padding: 10px;
}
span {
padding: 10px;
}
but input the number of pixels you would need to show the image.
但输入显示图像所需的像素数。
回答by AP257
Solved it - you can't set heightand widthon spanbecause it is an inline element. Switching to divsolved it.
解决了 - 你不能设置height和width打开，span因为它是一个内联元素。切换到div解决它。
Phew.
呼。
If anyone knows how to debug CSS with better tools than guesswork, hope, Google searches and swearing, please let me know!
如果有人知道如何使用比猜测、希望、谷歌搜索和咒骂更好的工具来调试 CSS，请告诉我！
