如何更巧妙实现带背景的容器内元素offset布局？

我需要实现如图所示的布局：

可以看到，Hero图片呈现偏移效果，背景高度短于该元素。我已通过嵌套CSS Grid和一个用于添加背景的占位元素实现此布局，但想知道是否有无需占位元素的更优方案。

现有实现的核心代码 #

HTML #

<div class="wrapper">
  <div class="container">
    <div class="bg"></div>
    <div class="child">
      <div class="offset image">offset</div>
      <div class="text">Lorem Ipsum</div>
    </div>
  </div>
</div>

SCSS #

.wrapper{ // 模拟真实网站容器
  width: 1200px;
  margin: 0 auto;
}

.container{ // 主Grid容器
  display: grid;
  grid-template-rows: 80px auto 120px;
  grid-template-columns: 1fr;

  // 实现全屏宽度
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.bg{ // 用于背景的占位元素
  background-color: teal;
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.child{  
  width: 1200px;
  margin: 0 auto;
  grid-row: 2 / 4; // 偏移实现模拟内边距
  grid-column: 1 / 2;
  
  display: grid; // 内部嵌套Grid实现图片偏移
  grid-template-rows: 1fr 120px;
  grid-template-columns: 50% 50%;
}

.offset.image{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-color: cyan;
}

.text{
  grid-column: 2 / 3; // 限制在第一行以实现图片偏移
  grid-row: 1 / 2;
  background-color: green;
  padding-bottom: 80px; // 测试用内边距
}

优化方案 #

方案1：使用伪元素替代占位背景元素 #

直接给.container添加::before伪元素来承担背景角色，省去单独的.bg占位元素，保持HTML结构简洁：

.wrapper{
  width: 1200px;
  margin: 0 auto;
}

.container{
  display: grid;
  grid-template-rows: 80px auto 120px;
  grid-template-columns: 1fr;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

// 用伪元素替代.bg占位元素，直接插入Grid布局中
.container::before{
  content: '';
  background-color: teal;
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.child{  
  width: 1200px;
  margin: 0 auto;
  grid-row: 2 / 4;
  grid-column: 1 / 2;
  display: grid;
  grid-template-rows: 1fr 120px;
  grid-template-columns: 50% 50%;
  z-index: 1; // 确保内容在伪元素背景上方
}

.offset.image{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-color: cyan;
}

.text{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background-color: green;
  padding-bottom: 80px;
}

这个方案完全沿用原布局逻辑，只是把占位元素替换成伪元素，HTML结构更干净，没有冗余标签。

方案2：直接利用Grid容器的背景属性 #

通过给.container直接设置背景并控制背景显示范围，彻底省去额外元素：

.wrapper{
  width: 1200px;
  margin: 0 auto;
}

.container{
  display: grid;
  grid-template-rows: 80px auto 120px;
  grid-template-columns: 1fr;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  // 直接设置背景，仅覆盖前两行区域
  background: teal;
  background-size: 100% calc(80px + 100%);
  background-repeat: no-repeat;
}

.child{  
  width: 1200px;
  margin: 0 auto;
  grid-row: 2 / 4;
  grid-column: 1 / 2;
  display: grid;
  grid-template-rows: 1fr 120px;
  grid-template-columns: 50% 50%;
}

.offset.image{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-color: cyan;
}

.text{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background-color: green;
  padding-bottom: 80px;
}

这个方案更简洁，但需要注意背景高度的计算（80px是第一行的固定高度，100%对应第二行的自适应高度），如果布局的固定高度有变化，需要同步调整background-size的值。

内容的提问来源于stack exchange，提问作者Luca Reghellin