Html 如何在网格中放置重叠两行的图像

因此，我有一张熊猫的图片，打算“挂”在我的网页上的黑线上，但问题是，它没有降低

.background

的

.top

部分，它需要重叠在网格中的

.top

和

.bottom

两个部分

html，
身体{
身高：100%；
保证金：0；
填充：0；
背景色：#179CA5；
}
.背景{
显示：网格；
高度：100vh；
宽度：100vw；
网格模板行：3fr 5fr；
网格模板区域：“backgroundTop”“backgroundBottom”；
}
.背景.顶部{
网格区域：背景顶部；
背景色：#179CA5；
}
.background.top img{
显示：块；
裕度：10vh自动0自动；
右：3vw；
最大高度：13雷姆；
最大宽度：13雷姆；
z指数：1；
位置：相对位置；
边框：3倍橙色固体；
}
.背景.底部{
网格区域：背景底部；
颜色：白色；
背景色：黑色；
}

---

您只需在

img

块中使用

top:50px

，根据需要更改

50px

---

最简单的方法就是在图像中添加负的底部边距。就这样,

.background .top img {
  margin-bottom: -45px;
}