我有两个带有背景图像的独立的非嵌套部分。一个显示其他不显示。一个不会显示,因为即使指定了高度也不会占用空间。当我将内容放入其中时,它会显示出来,但只会显示在内容的高度。因此,背景图像不是问题。除了绝对定位的项目(不算作浏览器的内容)之外,两者都没有内容。显示的部分位于常规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;
}
答案 0 :(得分:0)
在HTML中,您将调用类imgBoxSize
,而在CSS中将其称为imageBoxSize
。那些该死的错字。.