带有背景图片且完全没有内容显示的容器

时间:2019-07-24 12:23:35

标签: html css flexbox

我有两个带有背景图像的独立的非嵌套部分。一个显示其他不显示。一个不会显示,因为即使指定了高度也不会占用空间。当我将内容放入其中时,它会显示出来,但只会显示在内容的高度。因此,背景图像不是问题。除了绝对定位的项目(不算作浏览器的内容)之外,两者都没有内容。显示的部分位于常规div中。未显示的部分位于flexbox内部。不知道为什么会有所作为。

我已经在网上和堆栈溢出时看到了答案,它们全都包括将背景图像的路径更改为正确的路径,或者使用bg图像为元素赋予高度。我已经知道了这两个要求,并且在两个标签中都包含了它们(除非有错字)。但是它在一个中起作用,但在另一个中却不起作用。我是否有太多打字错误看不到的错字?让我发疯,这应该是一件简单的事情。第二双眼睛会很有帮助

这有效:

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

相关样式。容器类属性来自引导程序,因此未在CSS中定义

.headerText {
    text-shadow: 2px 2px 2px #222;
    color:#f4e9da;
    font-size:36px;
    padding-top:235px;
    font-style:italic;
    line-height:36px;
}

.headingImg {
    background-image:url('images/browndeck.jpg');
    background-position: center;
    background-repeat:no-repeat;
    background-size:cover;
    height:350px;
    margin-bottom:40px
}

这不起作用,因为即使指定了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>

相关样式

.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;
}

1 个答案:

答案 0 :(得分:0)

在HTML中,您将调用类imgBoxSize,而在CSS中将其称为imageBoxSize。那些该死的错字。.