Question

我正在尝试创建一个全屏幕背景图片，可以跨设备重新调整大小。

第一个内容部分我希望在完整图像之后始终显示在设备屏幕的“底部”。我已经这样做了。

我现在想要继续添加div个元素，但div会被推回到顶部。

我认为这可能是我的职位标签..？

代码

body {
  background-image: url(http://www.gettyimages.co.uk/gi-resources/images/CreativeImages/Hero-527920799.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.content {
  position: absolute;
  top: 100%;
  width: 100%;
  background: #FF6969;
}
.moreContent {
  height: 100px;
  top: 100%;
  width: 100%;
  background: white;
}
html:

<div class="content">
  Hello this is my content
  <br/>
  <br/>
  <br/>
  <br/>Lots of content
</div>

<div class="moreContent">
  this should be below 'content' div
</div>

（也使用bootstrap作为真实项目）

Fiddle

Answer 1

根据我的理解，你正在寻找这样的东西：

body {
  background-image: url(http://www.gettyimages.co.uk/gi-resources/images/CreativeImages/Hero-527920799.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin:0
}
.content {
  position: absolute;
  bottom: -100px;
  width: 100%;
  background: #FF6969;
  height: 100px;
}
.moreContent {
  position: absolute;
  height: 100px;
  bottom: -200px;
  width: 100%;
  background: white;
}

<body>
  <div class="content">
    Hello this is my content
    <br/>
    <br/>
    <br/>
    <br/>Lots of content
  </div>

  <div class="moreContent">
    more content...
  </div>

</body>

Answer 2

我会这样做有点不同，考虑到我不想继续向我的div类添加-100px，-200px等。这是一种非常肮脏的写css的方式。

所以我会为所有div元素创建一个容器类： -

<body> 
  <div class="container">
      <div class="content">
         Hello this is my content
         Lots of contentxxx
      </div>

       <div class="moreContent">
         more content...vcbcvbcv
       </div>
  </div>
</body>

然后使用以下css： -

body {
    background-image: url(http://www.gettyimages.co.uk/gi-resources/images/CreativeImages/Hero-527920799.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.container{
  bottom:0;
  position:absolute;
  width:100%;

}  

.content {
  height: 100px;
   width: 100%;
    background: #FF6969;
}

.moreContent {
    height: 100px;
  width: 100%;
    background: white;
}

我个人认为它更加通用和优雅。 https://jsfiddle.net/8xrap3o5/6/

全屏响应背景 - 然后正常

2 个答案: