Question

对不起，如果我的问题措辞不是最好的。我仍在使用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>

Answer 1

您的.pagetwo div中没有任何内容，也没有任何样式 - 我已经为其添加了一个高度，另外还从position: fixed元素中删除了.back滚动时用视口固定的元素。）

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

背景图片后的更多内容

1 个答案: