如何为与页面结构重叠的单个页面部分设置不同的背景颜色？

Question

我有一个包含多个部分的页面。例如：

<nav>
</nav>
<div class="A">
</div>
<div class="B">
</div>    
<div class="C">
</div>
<footer>
</footer>

现在我想拥有不同颜色的背景。颜色不应该匹配 虽然现有的部分，但在部分内部发生变化。

例如，我想从白色开始，覆盖导航部分和div.A的前半部分，然后黑色应该覆盖div.A的第二半和div.B的前半部分，依此类推。

这可能吗？ 使用div只是为了设置背景样式不会在这里工作，因为我只能将div与内容放在另一个div中但不能跨越两个div。

Answer 1

但是你需要使用线性渐变。

类似的东西：

nav,
div,
footer {
  height: 100px;
  ;
  border: 1px solid grey;
}
nav {
  background: lightblue;
}
.A {
  background-image: linear-gradient(lightblue, lightblue 50%, lightgreen 50%);
  height: 150px;
}
.B {
  background-image: linear-gradient(lightgreen, lightgreen 50%, red 50%);
}

<nav>
</nav>
<div class="A">
</div>
<div class="B">
</div>
<div class="C">
</div>
<footer>
</footer>

我这里只完成了前三个元素，但我认为基础已经建立。

但请注意，这些是单独的渐变，因此可维护性是个问题。这里可能建议使用CSS预处理器mixin或map。