跨越整个长度的div背景

Question

是否有可能在两个其他背景之间传播背景？ 所以你基本上有3个背景图像;顶部，中间部分，其长度可以根据div长度和底部变化。

喜欢这张图片

Answer 1

如果我理解你的问题，你希望背景有三种不同的颜色。

您可以使用linear-gradient上的#container来实现此目的。

body, html {
  height: 100%;
  margin: 0;
}
#container {
  height: 100%;
  background: linear-gradient(180deg, #9C84E2 10%, #9C84E2 20%, #00F37A 20%, #00F37A 80%, #00F37A 80%, #FF6081 80%);
}

<div id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>

Answer 2

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

Answer 3

你的意思是这样吗？

<强> HTML

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

<强> CSS

.top{
    width: 100%;
    height: 20%;
    background: blue;
}

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

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

FIDDLE

Answer 4

如果您希望内容覆盖所有内容，您可以选择＆＃34; fake＆＃34;使用绝对div的背景。看到这个（它会伸展到整个高度，但你可以改变它，当然）：

＆＃13;

＆＃13;

html,
body {
  height: 100%;
}
#main {
  background: green;
  height: 100%;
}
#top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50px;
  background: cyan;
}
#bot {
  width: 100%;
  height: 50px;
  background: red;
  position: absolute;
  bottom: 0;
}
#content {
  position: relative;
}

＆＃13;

<div id="main">
  <div id="top"></div>
  <div id="bot"></div>
  <div id="content">
    CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT
    HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT
    HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT
    HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;