Html 仅在部分背景上设置背景色

我有两个flexbox列，一个带有图像，另一个带有一些文本。 我想在这两列下放置一个div，就像一个填充颜色的“参考底图”

这个屏幕截图显示了我试图放置在列内容下的灰色框

如果此“参考底图”与文本的高度相同，也将是理想的。我尝试将包含行设置为

位置：relative

，然后创建一个

：：after

，该行绝对定位为颜色填充，但无法完成

.cheetos行{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
宽度：100%；
}
.cheetos行：：之后{
背景色：红色；
高度：200px；
宽度：200px；
}
.奇托斯柱{
显示器：flex；
弯曲方向：立柱；
弹性基准：100%；
弹性：1；
}
.奇托斯柱h2{
颜色：#F15A22；
}
.cheetos柱img{
高度：500px；
宽度：自动；
保证金：0自动；
}
@介质（最大宽度：768px）{
奇托斯街{
显示：块；
}
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
门矢状菱形肌。Morbi mollis aliquam turpis quis porttitor。多内克·奥古斯·尼西（Donec augue nisi），他是一名自由职业者。Donec cursus ullamcorper eros，在康格·维利特·洛博蒂斯。Nam vitae semper eros

射手座，最重要的，最重要的，最重要的，最重要的，最重要的，最重要的。Lorem ipsum dolor sit amet，是一位杰出的献身者。潜力悬钩子

前庭无门，权杖无门，封地无门

nibh前的Nunc，欧盟的lobortis augue eget，convallis lacus的molestie。努克·帕特·尼布，ac库苏斯·麦格纳

可以使用一系列重叠的div

我使用CSS网格是因为它提供了属性，允许网格区域相互重叠

下面的布局将背景色的高度限制为文本的自然高度，同时使图像看起来溢出背景色

根据您的媒体查询，它会切换到较小屏幕上的单列布局

.cheetos行{
显示：网格；
网格模板列：重复（6，1fr）；
对齐项目：开始；
}
.奇多专栏：第一个孩子{
网格柱：1/4；
网格行：1；
z指数：1；
}
.cheetos柱img{
宽度：100%；
高度：500px；
对象匹配：包含；
物体位置：顶部；
}
.cheetos列：最后一个孩子{
网格柱：2/-1；
网格行：1；
背景颜色：灰色；
显示：网格；
网格模板列：重复（5，1fr）；
}
.cheetos列：最后一个子项>*{
网格柱：3/-1；
}
@介质（最大宽度：768px）{
奇托斯街，
.cheetos列：最后一个孩子{
显示：block；/*堆叠内容并禁用所有网格属性*/
}
.cheetos柱img{
宽度：100%；
高度：自动；
}
}
.奇托斯柱h2{
颜色：#F15A22；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
门矢状菱形肌。Morbi mollis aliquam turpis quis porttitor。多内克·奥古斯·尼西（Donec augue nisi），他是一名自由职业者。Donec cursus ullamcorper eros，在康格·维利特·洛博蒂斯。Nam vitae semper eros

射手座，最重要的，最重要的，最重要的，最重要的，最重要的，最重要的。Lorem ipsum dolor sit amet，是一位杰出的献身者。潜力悬钩子

前庭无门，权杖无门，封地无门

nibh前的Nunc，欧盟的lobortis augue eget，convallis lacus的molestie。努克·帕特·尼布，ac库苏斯·麦格纳

我只是在

属性的帮助下设置了背景色：：在
伪元素之后


.cheetos行{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
宽度：100%；
位置：相对位置；
}
.cheetos行：：之后{
内容：“；
排名：0；
左：0；
位置：绝对位置；
背景色：#巴巴巴；
身高：100%；
宽度：100%；
z指数：-1；
}
.奇托斯柱{
显示器：flex；
弯曲方向：立柱；
弹性基准：100%；
弹性：1；
}
.奇托斯柱h2{
颜色：#F15A22；
}
.cheetos柱img{
最大高度：500px；
宽度：自动；
最大宽度：100%；
保证金：0自动；
}
@介质（最大宽度：768px）{
奇托斯街{
显示：块；
}
}


Lorem ipsum dolor sit amet，是一位杰出的献身者。
门矢状菱形肌。Morbi mollis aliquam turpis quis porttitor。多内克·奥古斯·尼西（Donec augue nisi），他是一名自由职业者。Donec cursus ullamcorper eros，在康格·维利特·洛博蒂斯。Nam vitae semper eros

射手座，最重要的，最重要的，最重要的，最重要的，最重要的，最重要的。Lorem ipsum dolor sit amet，是一位杰出的献身者。潜力悬钩子

前庭无门，权杖无门，封地无门

nibh前的Nunc，欧盟的lobortis augue eget，convallis lacus的molestie。努克·帕特·尼布，ac库苏斯·麦格纳

将灰色背景放在列而不是行上是否有问题？：：after或：：before应为内容：“”；财产。