我已经在几个 span 元素上设置了 background-image，但它们没有显示，我想是因为我的 height 和 width 设置被忽略。

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:

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);
} 

实际上没有任何背景图像是可见的。

在 Chrome 开发者工具中，在 Computed Style 下，这两个 span 看起来确实有背景图片。如果我复制并粘贴此图片的 URL，我会看到图片。然而实际上并没有渲染任何内容。

[更新 - 这部分已解决，谢谢] 在 Chrome 开发者工具中，在匹配规则下，只有 #starthere 和 #donate跨度实际上是在获取 background-image 属性。 #primarydocs 跨度不是。为什么不呢？

最佳答案

SPAN 是一个内联元素。哪个确实会忽略这样的事情。尝试将 CSS 中的显示模式设置为:display: block;

关于html - CSS 拼图 : How to add background-image and set height/width on empty span?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4716284/