CSS谜题:如何在空跨度上添加背景图像并设置高度/宽度？

Question

我给自己定background-image的一对夫妇的span元素,但它们没有显示出来,我想是因为我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开发者工具中,在"计算样式"下,这两个跨度似乎确实具有背景图像.如果我复制并粘贴此图像的URL,我会看到图像.但实际上并没有渲染.

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

Answer 1

SPAN是一个内联元素.这确实会忽略这些事情.尝试将CS​​S中的显示模式设置为:display: block;