全屏响应背景 - 然后正常

Question

我正在尝试创建可跨设备调整大小的全屏背景图片。

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

我现在想继续添加 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 元素创建一个容器 Class:-

<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/

全屏响应背景 - 然后正常

Full screen responsive background - then normal

html

css

background-image

twitter-bootstrap