我在页面中有两个部分。我正在显示第一部分中显示的背景图像，因为我添加了类似<section class="back_bg banner_bg"></section>
现在我正在显示相同的图像（或者可能是另一张图像），这次我在类似的内容中添加了这个类
<section><div class="back_bg banner_bg"></div></section>
但这次我的图片没有显示。如果我将display: initial;设置为该部分，那么它可以正常工作，但它也会删除内容的背景颜色。
注意：我不想使用特定的身高。
知道为什么会出现这个问题？
第一部分
html,body {
margin: 0;
padding: 0;
height: 100%;
}
.banner_bg{
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: auto;
background-position: center;
min-height:100%;
}
.back_bg{
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('https://static.pexels.com/photos/34950/pexels-photo.jpg');
background-attachment: fixed;
}
section{background-color: #fff;padding-top: 30px;padding-bottom: 30px;} <section class="back_bg banner_bg"></section>
第二部分
html,body {
margin: 0;
padding: 0;
height: 100%;
}
.banner_bg{
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: auto;
background-position: center;
min-height:100%;
}
.back_bg{
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('https://static.pexels.com/photos/34950/pexels-photo.jpg');
background-attachment: fixed;
}
section{background-color: #fff;padding-top: 30px;padding-bottom: 30px;} <section>
<div class="back_bg banner_bg"></div>
<p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
答案 0 :(得分：2)
代码中第一部分的最小高度以百分比指定。其产生的高度是相对于其包含块（即主体）的高度计算的。
现在，由于您还没有指定第二部分的高度，因此将根据其中的内容计算其高度。因此，它没有自己的高度。
div的高度是根据其包含的块（即第二部分）计算的，它不具有自己的高度。 因此，你必须特别给div一些高度。设置最小高度不会有帮助。
显示：初步说明，请阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/initial
了解更多：
https://developer.mozilla.org/en-US/docs/Web/CSS/height
答案 1 :(得分：0)
html,body {
margin: 0;
padding: 0;
height: 100%;
}
.banner_bg{
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: auto;
background-position: center;
min-height:100%;
}
.back_bg{
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('https://static.pexels.com/photos/34950/pexels-photo.jpg');
background-attachment: fixed;
}
section{background-color: #fff;padding-top: 30px;padding-bottom: 30px;}<!--first section-->
<section class="back_bg banner_bg"></section>
<!--end first section-->
<!--section section-->
<section>
<div class="back_bg banner_bg"><img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" height="300" style="visibility:hidden" /></div>
<div style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</section>
<!--section section-->
答案 2 :(得分：0)
背景图片应该是背景的东西。因此，对于具有背景的块元素，它应该包含一些子元素。
注意：直接在div中添加文本是一种不好的做法。你应该 用
换行p或span
html,body {
margin: 0;
padding: 0;
height: 100%;
}
.banner_bg{
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: auto;
background-position: center;
min-height:100%;
}
.back_bg{
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('https://static.pexels.com/photos/34950/pexels-photo.jpg');
background-attachment: fixed;
}
section{background-color: #fff;padding-top: 30px;padding-bottom: 30px;}<!--first section-->
<section class="back_bg banner_bg"></section>
<!--end first section-->
<!--section section-->
<section>
<div class="back_bg banner_bg">
<span style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</section>
<!--section section-->
答案 3 :(得分：0)
如果您希望第二部分可见，则需要编辑您的样式：
html,body {
margin: 0;
padding: 0;
height: 100%;
}
.banner_bg{
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: auto;
background-position: center;
min-height:100%;
position: absolute;
z-index: 0;
}
.back_bg{
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('https://static.pexels.com/photos/34950/pexels-photo.jpg');
background-attachment: fixed;
}
section{background-color: #fff;padding-top: 30px;padding-bottom: 30px; position: relative;}
section p, section span { position: relative;
z-index: 1; display: block; padding: 2em 0; }<!--first section-->
<!--<section class="back_bg banner_bg"></section>-->
<!--end first section-->
<!--section section-->
<section>
<div class="back_bg banner_bg">
<span style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</section>
<!--section section-->