背景图像之后的更多内容答案

【问题标题】：More content after background-image背景图像之后的更多内容
【发布时间】：2018-01-25 03:44:11
【问题描述】：

对不起，如果我的问题措辞不够好。我仍在学习 CSS 和 HTML 并学习正确的术语。无论如何，我正在为我的投资组合创建一个主页，并将主页上的图像顶部的文本居中，我创建了一个 div 并将背景图像应用于 CSS。在 div 内部，我添加了文本和向下滚动箭头。

现在我想创建网站的下一部分，但使用白色背景，而不是图像。我该怎么办？我为我的第二页创建了一个 div，当我添加元素时，会出现相同的背景。谢谢。

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.back {
  background-image: url(http://i.imgur.com/9WgJg0G.gif);
  background-size: cover;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

.text {
  display: flex;
  justify-content: center;
  padding-top: 37vh;
  font-size: 8vh;
  z-index: 9999;
  color: #f39dbc;
  text-shadow: 6px 6px #8ccddb;
}

.pageone {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .75vh;
}

.scroll {
  display: flex;
  justify-content: center;
  vertical-align: middle;
  padding-top: 27vh;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
  <div class="pageone">
    <div class="back">
      <div class="text">
        <h1>1080</h1>
      </div>

      <div class="scroll">
        <img src="scrolldown.png" alt="" id="scroll" />
      </div>
    </div>

  </div>
  <div class="pagetwo">

  </div>
</body>

【问题讨论】：

只需从.back 中删除position: fixed？

标签： html css flexbox centering

【解决方案1】：

你的.pagetwo div 里面什么都没有，也没有样式——我给它添加了一个高度，并从.back 元素中删除了position: fixed（这使得该元素在滚动时与视口一起固定） .

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.back {
  background-image: url(http://i.imgur.com/9WgJg0G.gif);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

.text {
  display: flex;
  justify-content: center;
  padding-top: 37vh;
  font-size: 8vh;
  z-index: 9999;
  color: #f39dbc;
  text-shadow: 6px 6px #8ccddb;
}

.pageone {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .75vh;
}

.scroll {
  display: flex;
  justify-content: center;
  vertical-align: middle;
  padding-top: 27vh;
}

.pagetwo {
  height: 100vh;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
  <div class="pageone">
    <div class="back">
      <div class="text">
        <h1>1080</h1>
      </div>

      <div class="scroll">
        <img src="scrolldown.png" alt="" id="scroll" />
      </div>
    </div>

  </div>
  <div class="pagetwo">

  </div>
</body>

【讨论】：

谢谢，真不敢相信我错过了。我忘记了那个位置：固定。我的意思是有背景附件：固定。创建视差效果