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 对内联元素没有影响（默认情况下，该范围是。）

因此，在您的范围内添加display:inline-block或display:block，或将其浮动，或绝对定位 - 以便宽度和高度允许生效。

Answer 2

在你的CSS添加

  

显示：块

或

  

显示：内联块

如果你想定义宽度和高度，最好不要使用span，而是使用div。