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跨度实际上正在接收{{ 1}}属性。 background-image范围不是。为什么不呢？

Answer 1

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

Answer 2

我认为您的span需要display:inline-block，普通范围始终具有'自然'宽度和高度。

Answer 3

由于a display: inline;是自动的，因此无法从CSS获取width和height属性。

如果您想使用inline特征但没有内在内容（例如：<span>内容</span>）而是拥有背景图片，请改用padding。< / p>

即：

span { padding: 10px; }

但输入显示图像所需的像素数。

Answer 4

解决了问题 - 您无法在height上设置width和span，因为它是内联元素。切换到div解决了它。

呼。

如果有人知道如何使用比猜测更好的工具来调试CSS，希望，谷歌搜索和发誓，请告诉我！

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

4 个答案: