Question

我试图设计像网页设计一样的谷歌游戏（手机版）。我使用的是CUSTOM GRID SYSTEM（12 col 0.5％保证金）。问题是身体颜色出现在标题部分（我想是这样，也许是一个不同的问题）。我想让它看起来/滚动像这样： Example image of google play mobile

以下是代码：

**

您可能需要缩放到250％或横向最大宽度：640px才能查看设计。

**

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 1

稍微玩了一下后，我觉得标题有问题。如果你给它position: fixed和z-index: -1，它就有效。唯一剩下的问题是你必须确保空间仍然存在。我推荐<div style="height: 70%"></div>

Answer 2

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 3

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

身体颜色显示在标题

3 个答案: