html - 背景图像未出现在 Span CSS 上

Question

我的页面上有一个带有 eah-logo-img 类的简单跨度，在我的 CSS 内部，我尝试为其设置背景图像。但是，由于某种原因它无法正常工作。

这是我的 HTML:

<span class="eah-logo-img"></span>

这是我的 CSS:

.eah-logo-img{
    width: 150px;
    height: 150px;
    vertical-align: middle;
    background: url('img/logo_def_white.gif');
    background-size: auto;
}

我的图像在 img 文件夹中(与 CSS 在同一文件夹中；所以它应该可以工作。)。 我已确保名称正确，并且检查了 Chrome 检查元素并确保链接正确。

我不确定为什么这不起作用。

干杯。

Answer 1

您的 span 元素没有实际宽度或高度 - 因此您几乎看不到任何背景，因为它显示在 0*0 像素大的区域中。

width 和 height 根据定义 对内联元素没有影响(默认情况下是 span。)

因此，将 display:inline-block 或 display:block 添加到您的 span 中，或者将其 float ，或者将其绝对定位——这样宽度和高度就是 允许产生影响。