html - 背景应该在背景之后开始

Question

我有一个问题，我的背景图像覆盖了另一个背景。我希望第二个背景应该在图像之后开始，而不是从第一个图像开始的站点顶部开始。如果我在第二张图片上添加定位，它可以工作，但是有没有没有定位的解决方案？

$(window).scroll(function() {
  if ($(window).scrollTop() >= 50) {
    $('div#myTopnav').addClass('scrolled');
    $('a').addClass('scrolled2');
  } else {
    $('div#myTopnav ').removeClass('scrolled');
    $('a').removeClass('scrolled2');
  }
});

function myFunction() {
  $("#myTopnav").toggleClass('responsive');

}

body {
  margin: 0;
  padding: 0;
  height: 2000px;
}

#wrapper {
  width: 1000px;
  margin: 0 auto;
}

p {
  position: absolute;
  top: 1000px;
}

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 100px;
  transition: 0.35s all ease;
  z-index: 1000;
  overflow: hidden;
}

.topnav a {
  display: inline-block;
  margin: 20px 50px;
  ;
  list-style: none;
  text-align: right;
  text-decoration: none;
  font-size: 18px;
  transition: 0.35s all ease;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: none;
}

.topnav a:hover {
  text-decoration: none;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: fixed;
    z-index: 1001;
  }
  .topnav.responsive .icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    z-index: 1001;
  }
  .topnav.responsive a:hover {
    padding-left: 10px;
    color: white;
  }
}

.banner {
  background: url('/images/camera2.jpg');
  background-position: center;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  z-index: 120;
  position: absolute;
}

#grad {
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#ecd8c6, white);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#ecd8c6, white);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#ecd8c6, white);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#ecd8c6, white);
  /* Standard syntax */
  height: 60%;
  position: relative;
  top: 920px;
  left: 0;
}

.scrolled {
  min-height: 10px;
  color: inherit;
  background: black;
  transition: 0.35s all ease-in-out;
  opacity: 0.7;
}

.scrolled2 {
  color: white;
  opacity: 1;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="topnav" id="myTopnav" align="left">
  <a href="">
    <p>Home</p>
  </a>
  <a href="">
    <p>Portfolio</p>
  </a>
  <a href="">
    <p>About</p>
  </a>
  <a href="">
    <p>Impressum</p>
  </a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<div class="banner topnav"></div>
<div id="grad">
  <div id="wrapper">
    <div>
      <p></p>
    </div>
  </div>
</div>

Answer 1

所以我猜你希望 grad 在 banner 之后开始。首先，为什么 .banner 也有类 .topnav ？ (它也将从 .topnav 获取样式)。另外，banner 是否需要有 position:absolute？

好吧，如果 banner 必须有绝对位置，我看到你给了 min-height:100vh，你想要 grad在它之后开始，为什么不在 grad 上设置 top:100vh (等于横幅高度)？

所以你会有

  #grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#ecd8c6, white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#ecd8c6, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#ecd8c6, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#ecd8c6, white); /* Standard syntax */
  height: 60%;
  position: relative;
  top: 100vh;
  left: 0;
  }

参见片段或 jsFiddle

 $(window).scroll(function() {
   if ($(window).scrollTop() >= 50) {
     $('div#myTopnav').addClass('scrolled');
     $('a').addClass('scrolled2');
   } else {
     $('div#myTopnav ').removeClass('scrolled');
     $('a').removeClass('scrolled2');
   }
 });

 function myFunction() {
   $("#myTopnav").toggleClass('responsive');

 }

body {
  margin: 0;
  padding: 0;
  height: 2000px;
}

#wrapper {
  width: 1000px;
  margin: 0 auto;
}

p {
  position: absolute;
  top: 1000px;
}

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 100px;
  transition: 0.35s all ease;
  z-index: 1000;
  overflow: hidden;
}

.topnav a {
  display: inline-block;
  margin: 20px 50px;
  ;
  list-style: none;
  text-align: right;
  text-decoration: none;
  font-size: 18px;
  transition: 0.35s all ease;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: none;
}

.topnav a:hover {
  text-decoration: none;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(: first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: fixed;
    z-index: 1001;
  }
  .topnav.responsive .icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    z-index: 1001;
  }
  .topnav.responsive a:hover {
    padding-left: 10px;
    color: white;
  }
}

.banner {
  background: url('/images/camera2.jpg');
  background-position: center;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  z-index: 120;
  position: absolute;
}

#grad {
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#ecd8c6, white);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#ecd8c6, white);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#ecd8c6, white);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#ecd8c6, white);
  /* Standard syntax */
  height: 60%;
  position: relative;
  top: 100vh;
  left: 0;
}

.scrolled {
  min-height: 10px;
  color: inherit;
  background: black;
  transition: 0.35s all ease-in-out;
  opacity: 0.7;
}

.scrolled2 {
  color: white;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav" align="left">
  <a href="">
    <p>Home</p>
  </a>
  <a href="">
    <p>Portfolio</p>
  </a>
  <a href="">
    <p>About</p>
  </a>
  <a href="">
    <p>Impressum</p>
  </a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<div class="banner topnav"></div>
<div id="grad">
  <div id="wrapper">
    <div>
      <p></p>
    </div>
  </div>
</div>