出于某种原因，我的英雄形象落后于我的 body 内容。如何修复以便英雄形象将我的 body 内容压低。我试过 z-index 但没有用(我的主图有可变的自动高度)。
.hero .hero-bg, .hero {
width: 100%;
height: 100%;
}
.hero .hero-bg {
background-image:url('http://via.placeholder.com/1000x300');
background-repeat: no-repeat;
background-size: cover;
background-position: center 80%;
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
html {
width: 100%;
height: 100%;
color: red;
}
body {
background-color: green;
}<body>
<section class="hero">
<div class="hero-bg">
</div>
</section>
<section class="content">
<p> content - content - content - content - content - content - content - content - content - content - content - content - content</p>
</section>
</body>最佳答案
原因是因为你给你的图片position: absolute;，所以它会落后于其他内容。
我在 HTML 中添加了一些额外的内容，因此很明显其余内容不会与您的 .hero 部分重叠:
body,
html {
width: 100%;
height: 100%;
margin: 0;
color: red;
}
body {
background-color: green;
}
.hero,
.hero-bg,
.content {
height: 100%;
}
.hero-bg {
background-image: url('http://via.placeholder.com/1000x300');
background-repeat: no-repeat;
background-size: cover;
background-position: center 80%;
opacity: 1;
}<section class="hero">
<div class="hero-bg"></div>
</section>
<section class="content">
<div>Other content</div>
</section>关于html - 正文内容背后的英雄形象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50681045/