Html 具有背景图像且没有任何内容的容器根本不显示

我有两个独立的非嵌套部分和背景图像。一个显示另一个不显示。由于即使指定了高度也不占用空间，因此不会显示该高度。当我把内容放进去时，它会显示出来，但只在内容的高度。所以bg图像不是问题所在。除了绝对定位的项目（不算作浏览器的内容）之外，两者都没有任何内容。显示的部分位于常规div内。不显示的部分位于flexbox内。我不知道为什么会有不同

我在web和stack overflow上看到了答案，它们都包括要么将背景图像的路径更改为正确的路径，要么使用bg图像为元素指定高度。我已经知道这两个要求，并且我在两个标签中都有它们（除非有打字错误）。但它在其中一种情况下有效，但在另一种情况下无效。我是否有一个打字错误，我看了太多都看不出来？让我为一件简单的事情发疯。第二双眼睛会很有帮助

这项工作：

<section class="headingImg">
   <p class="container headerText">
       Increase your home's value<br />and enchance your lifestyle
   </p>
</section>

这不起作用，因为即使指定了高度，带有bgimage的节也没有高度

    <div class="container">
        <section class="flex">
            <div class="flexDiv bgColor">
                <section id="kitchens" class="imgBoxSize cover relative">
                    <h2 class="absCenter">Kitchens</h2>
                </section>
                <p>Enhance the lifestyle of your mice, cock roaches and flies</p>
            </div>
        </section>
    </div>

---

在HTML中调用类

imgBoxSize

，而在CSS中调用类

imageBoxSize

。那些该死的打字错误…

在这两种情况下都是这样，所以这不可能是正确的。如果它有一个height属性，它应该可以工作。它与标记上的.code>imgBoxSize和css上的.imageBoxSize有关。一个好主意是总是在浏览器控制台EYP上检查应用的样式…在那里输入错误！好地方！我一看就知道是这样。不必尝试。我看代码看得太久了。打字错误通常不算作合法问题，如果被要求，我会删除，或者你可以创建并回答，我会接受。谢谢。@Bobh请删除该问题，因为它已经有3张选票了，因为它是一个打字错误。

    <div class="container">
        <section class="flex">
            <div class="flexDiv bgColor">
                <section id="kitchens" class="imgBoxSize cover relative">
                    <h2 class="absCenter">Kitchens</h2>
                </section>
                <p>Enhance the lifestyle of your mice, cock roaches and flies</p>
            </div>
        </section>
    </div>

.bgColor{
    background-color:white;
}

.flex {
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
}

.flexDiv {
    background-color:#CCC;
    width:30%;
    margin:0 auto;
}

#kitchens {
    background-image:url("images/kitchen1.jpg");
    background-repeat:no-repeat;
}

.imageBoxSize {
    height:200px;
    width:100%
}

.cover {
    background-size:cover;
    background-position:center;
}

.relative {
    position:relative
}

.absCenter {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin:auto;
}