Html 整个长度上的div背景

是否可能有一个背景在其他两个背景之间传播？ 所以你基本上有3个背景图像；顶部、中间部分（其长度可随div长度而变化）和底部

就像在这张照片里

---

只需创建三个div，并对每个div应用不同的背景。

你的意思是这样吗

HTML

<div class="wrapper">
   <div class="top"></div>
   <div class="middle"></div>
   <div class="bottom"></div>
</div>

---

如果我正确理解了你的问题，你希望背景是三种不同的颜色

您可以使用

#容器上的
线性渐变
来实现这一点


body，html{
身高：100%；
保证金：0；
}
#容器{
身高：100%；
背景：线性梯度（180度、9C84E2 10%、9C84E2 20%、00F37A 20%、00F37A 80%、00F37A 80%、FF6081 80%）；
}
Lorem ipsum door sit amet，一位杰出的领导者，他是一位临时劳工和大股东。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？我们必须在法律上尊重所有人的权利，因为他们的权利是不可侵犯的。Nemo enim ipsam voluptatem qui a Voluptates sit aspernatur aut odit aut fugit，sed qui Consequentur magni dolores eos qui Orience voluptatem sequi Nesciut.
如果你希望内容覆盖所有内容，你可以使用绝对div来“伪造”背景。看到这个（它将延伸到整个高度，但您当然可以更改它）：


html，
身体{
身高：100%；
}
#主要{
背景：绿色；
身高：100%；
}
#顶{
位置：绝对位置；
排名：0；
宽度：100%；
高度：50px；
背景：青色；
}
#机器人{
宽度：100%；
高度：50px；
背景：红色；
位置：绝对位置；
底部：0；
}
#内容{
位置：相对位置；
}

内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里
内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里
内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里
内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里
因为我需要所有空间来放置我的内容，背景会完全重叠，但我不想使顶部和底部变形。这很好，但顶部和底部可能需要固定高度。就像这样，但我需要我的内容在整个box@Azrael你说整个盒子是什么意思？我不明白。父div是
.wrapper
。你能用另一种方式解释吗？OP希望内容能覆盖所有三个部分，而不仅仅是中间一个，看我的答案。做得好，先生！您可能可以删除内部元素，因为OP希望在整个容器中写入内容。@Shomz-谢谢！：）完美的这正是我需要的。
.top{
    width: 100%;
    height: 20%;
    background: blue;
}

.middle{
    width: 100%;
    height: 60%;
    background: green;
}

.bottom{
    width: 100%;
    height: 20%;
    background: red;
}