Html 父项的背景色匹配具有负上下边距的子项的高度

附件是一个理想的影响，我要去的形象。我正试图用负的边距来做这件事。我需要子元素在顶部和底部展开超过父元素。问题是父元素的背景色与子元素的高度匹配。这是一个响应性强的站点，我将无法使用子元素的绝对位置作为子元素的高度，因此父元素将是可变的。任何帮助都将不胜感激

下面是我的代码

身体{ 背景色：DBD9DB； } 头像{ 保证金：0； } 头部图像{ 显示：块； 保证金：0自动； } 母公司{ 背景色：fff4d7； } 孩子{ 背景：无FFF； 保证金：-46px自动-38px； 位置：相对位置； 文本对齐：居中； 宽度：80%； } 标题 Lorem ipsum dolor sit amet，是一位杰出的献身者。人类前庭是一个完整的无尾生物。马利苏亚达大兽人生命体中的蛋白质，ac viverra felis iaculis。拉齐尼亚商品拍卖行馆长。潜力悬钩子。无节杖梅特斯和利奥库苏斯，非拍卖人turpis酵素

可以在父id中使用：after和：before伪元素来更改背景色，然后在子id中使用负边距

请查看此代码段：

身体{ 背景色：DBD9DB； } 头像{ 保证金：0； } 头部图像{ 显示：块； 保证金：0自动； } 母公司{ 背景色：fff4d7； } 父项：之前，父项：之后{ 内容：； 显示：块； 高度：50px； 背景颜色：蓝色； } 孩子{ 背景：无FFF； 位置：相对位置； 文本对齐：居中； 宽度：80%； 保证金：-50px自动； } 标题 Lorem ipsum dolor sit amet，是一位杰出的献身者。人类前庭是一个完整的无尾生物。马利苏亚达大兽人生命体中的蛋白质，ac viverra felis iaculis。拉齐尼亚商品拍卖行馆长。潜力悬钩子。无节杖梅特斯和利奥库苏斯，非拍卖人turpis酵素

身体{ 背景色：DBD9DB； } 母公司{ 背景色：fff4d7； } 家长：以前， 家长：之后{ 内容：； 显示：块； 高度：50px； 背景颜色：蓝色； } 孩子{ 背景：无FFF； 位置：相对位置； 文本对齐：居中； 宽度：80%； 保证金：-50px自动； } .家长{ 宽度：100%； 高度：自动； 边距：0自动0自动； 背景色：B5； 溢出：隐藏； 位置：相对位置； } img{ 宽度：100%； 高度：自动； } .clearfix{ 溢出：自动； 缩放：1； } 标题 Lorem ipsum dolor sit amet，是一位杰出的献身者。人类前庭是一个完整的无尾生物。马利苏亚达大兽人生命体中的蛋白质，ac viverra felis iaculis。拉齐尼亚商品拍卖行馆长。潜力悬钩子。 无节杖梅特斯和利奥库苏斯，非拍卖人turpis酵素

---

非常感谢您的回复！这对底层肯定有用。但是在上面，我需要孩子看起来像是躺在图片的上面。谢谢你的回复。不幸的是，我不能绝对定位标题图像，因为它也会有响应；所以它的，和它的父包装的高度将是可变的。@masterShake不知道你需要什么，我为我的代码添加了一个img。你调整后的解决方案正是我想要的。非常感谢你！