Body 颜色出现在 header

Question

我正在尝试设计google 像网页设计一样玩（手机版）。我正在使用自定义网格系统（12 列 0.5% 边距）。问题是 body 颜色出现在 header 部分（我想是的，也许它是一个不同的问题）。我想 look/scroll 像这样： Example image of google play mobile

代码如下：

**

You may need to zoom to 250% or landscape max width:640px to view the design.

**

body {
  margin: 0px;
  padding: 0px;
  font-family: Roboto;
  background: #eeeeee;
}
html {
  margin: 0px;
  padding: 0px;
}
h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
.top {
  height: auto;
  margin: auto;
  font-family: Roboto Light;
}
.nav {
  height: 40px;
  width: 100%;
  position: fixed;
  background: #4caf50;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
  font-size: 20px;
  width: auto;
  padding: 5px;
  margin: 5px;
  text-decoration: none;
  color: white;
  text-align: center;
}
.nav a:hover,
.nav a:active {
  background-color: #388e38;
}
.header {
  background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
  height: 70%;
  width: 100%;
}
a {
  text-decoration: none;
}
.container {
  margin: 5%;
  background: white;
}
.personal_icon {
  margin: 5%;
}

<html>

<head>
  <title>
    Test
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
  <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
  <link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
  <link rel="stylesheet" href="grid.css">
</head>

<body>
  <div class="top">
    <div class="nav">
      <nav>
        <img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
        <a href="#" style="float:left; margin-top:0px; height:30px;">About Me</a>
        &nbsp;
        <a href="#" style="float:left; margin-top:0px; height:30px;">My Projects</a>
        &nbsp;
      </nav>
    </div>
  </div>
  <br>
  <div class="header">
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

将导航的 z-index 设置为 1 应该会有帮助。

Answer 2

玩了一下，我觉得header有问题。如果你给它 position: fixed 和 z-index: -1，它就会起作用。剩下的唯一问题是您必须确保 space 保留。我推荐 <div style="height: 70%"></div>

Answer 3

你想要这样的东西。在您的代码中，您正在修复 header 的 bg-image，因此 body 将滚动该图像，因此需要修复 header 而不是修复 bg-image

body {
  margin: 0px;
  padding: 0px;
  font-family: Roboto;
  background: #eeeeee;
  padding-top:70vh;
}
html {
  margin: 0px;
  padding: 0px;
}
h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
.top {
  height: auto;
  margin: auto;
  font-family: Roboto Light;
}
.nav {
  height: 40px;
  width: 100%;
  position: fixed;
  background: #4caf50;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
  top:0;
}
.nav a:link,
.nav a:visited {
  font-size: 20px;
  width: auto;
  padding: 5px;
  margin: 5px;
  text-decoration: none;
  color: white;
  text-align: center;
}
.nav a:hover,
.nav a:active {
  background-color: #388e38;
}
.header {background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
  height: 70vh;
  width: 100%;
  position:fixed;
  top:40px;
  z-index:-1;
}
a {
  text-decoration: none;
}
.container {
  margin: 5%;
  background: white;
}
.personal_icon {
  margin: 5%;
}

<html>

<head>
  <title>
    Test
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
  <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
  <link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
  <link rel="stylesheet" href="grid.css">
</head>

<body>
  <div class="top">
    <div class="nav">
      <nav>
        <img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
        <a href="#" style="float:left; margin-top:0px; height:30px;">About Me</a>
        &nbsp;
        <a href="#" style="float:left; margin-top:0px; height:30px;">My Projects</a>
        &nbsp;
      </nav>
    </div>
  </div>
  <br>
  <div class="header">
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Body 颜色出现在 header

Body color appearing over header

html

css

document-body