Div 高度为 0px，因此不显示背景图片

Question

我的 html 代码中的 body 标签中有一些 div 标签，例如：

<div class="landing">
<div class="home-wrap">
    <div class="home-inner">
    </div>
</div>
</div>

我想要 div 标签内的背景图片，带有 home-inner class，所以在我的 CSS 代码中我有这样的东西：

.home-inner {
background-image: url(../img/bg.jpg);
}

但是当我测试它时，我所有的 div 标签的高度都是零，因此背景图像不可见。我看过它与溢出有关，parents和children但我不太明白。

我是这方面的初学者，非常感谢您的帮助，来自阿根廷的问候。

--- 编辑 ---

我需要图像作为所有高度和宽度的背景而不滚动，并保持响应，但它仍然不起作用。

我在下面添加截图。

Answer 1

尝试

.home-inner {
background-image: url('../img/bg.jpg');
}

而不是

.home-inner {
background-image: url(../img/bg.jpg);
}

注意这些引用。

Answer 2

将高度和宽度应用到 .home-inner 并确保您的 url 在图像路径周围有引号 ''。您还可以使用 background 属性自定义 background-image。

.home-inner {
    height: 100vh;
    width: 100vw;
    background-image: url('../img/bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

来自加拿大的问候！

Answer 3

因为你的 div 是空的，所以它没有高度，所以如果你在你的 CSS 中添加这个，图像将显示在 div 中：

.home-inner {
   height:300px;
   background-image: url('../img/bg.jpg');
}

这行得通！

Div 高度为 0px，因此不显示背景图片

Div with height 0px so not showing background img

html

css

height