Question

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

stringBuilderTest

$(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;
}

Answer 1

所以我想你希望grad在banner之后开始。首先，.banner为什么还有.topnav类？（它也将从.topnav获得样式）。另外，banner需要position:absolute吗？

如果banner必须有绝对位置，并且我看到你给了min-height:100vh，并且你希望grad在它之后立即开始，那你为什么不设置{ top:100vh上{1}}（等于横幅高度）？

所以你会有

grad

请参阅代码段或jsFiddle

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

 $(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;
}

背景应该在背景后开始

1 个答案: