所以我有一张 Pandas 图片，打算“挂”在我网页的黑线上，但问题是，它并没有降低 .top 部分 .background，它需要覆盖网格中的 .top 和 .bottom 两部分。
html,
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #179CA5;
}
.background {
display: grid;
height: 100vh;
width: 100vw;
grid-template-rows: 3fr 5fr;
grid-template-areas: "backgroundTop" "backgroundBottom";
}
.background .top {
grid-area: backgroundTop;
background-color: #179CA5;
}
.background .top img {
display: block;
margin: 10vh auto 0 auto;
padding-right: 3vw;
max-height: 13rem;
max-width: 13rem;
z-index: 1;
position: relative;
border: 3px orange solid;
}
.background .bottom {
grid-area: backgroundBottom;
color: white;
background-color: black;
}<body>
<div class="background">
<div class="top">
<img src="https://i.imgur.com/ki4auk5.png" alt="Panda">
</div>
<div class="bottom">
</div>
</div>
</body>网页:https://gyazo.com/e3bee60f6a873837c0f3241cd4a8e180
我创建了一个 jsfiddle帮助，你可以明白我的意思。
最佳答案
您可以在 img block 中简单地使用 top: 50px，更改 50px 以满足您的需要。
关于html - 如何在网格中放置重叠两行的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54259499/