CSS如何让嵌套的background元素覆盖整个.section父容器

现有页面DOM结构固定为如下层级，不可调整：

section   // 单个section对应一个container
   ->container // 单个container可包含多个元素
   ->elements // 在此处设置的background类需要覆盖整个section区域

需要定义一个background元素，使其能够完整覆盖所属的整个section区域。

注意事项 #

• 接口返回的数据固定为section/container/elements层级结构，无法修改DOM嵌套顺序
• 页面可能存在多个section，每个section需要配置独立的背景

现有代码 #

CSS样式 #

.section {
  width: 100%;
  background-color: yellow;
}

.container {
  height: 300px;
  padding: 30px;
  margin: 100px;
  background-color: red;
}

.background {
  width: 100%;
  height: 100%;
}

.red {
  background: red;
}

.green {
  background: green;
}

HTML结构 #

<div class="section">
  <div class="container">
    <div class="background green" />
    <div>
      some content
    </div>
  </div>
</div>

当前效果 #

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