Question

Div不应该超过带有div的背景图像的Div，但由于某种原因，导航上会显示about div：

body {
  margin: 0;
  padding: 0;
  /*background-color: blue;*/
}

.divider {
  background-color: #be2b27;
  width: 100%;
  height: 100px;
  position: absolute;
  display: block;
  padding: 0;
}

.divider h1 {
  font-family: "Nexa Light";
  font-size: 2em;
  color: white;
  text-align:left;
  padding-left: 10px;
}

.lorem-text {
  font-family: "Menlo";
  font-size: 1.2em;
  color: white;
}

.start-section {
   margin-top: 30px;
   /* position: absolute; */
   padding-left: 20px;
   padding-top: 20px;
}


#start-bg {
  background-image: url(water.jpg);
  background-color:#9abee1;
  background-repeat: round;
  height:100%;
  position: absolute;
}

#home-head {
  font-family: 'Nexa Light';
  /* font-size: ; */
  padding-top: 30px;
  color: white;
}

.nav { }

<div id="start-bg">
  <!--<div class="nav"...>...</div>-->
  <div class="start-section">
    <h1 id="home-head">Landing Page</h1>
    <p class="lorem-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare est in maximus vestibulum.
    Mauris eu tincidunt quam.<br> In commodo neque id tortor mattis, non consectetur ante tincidunt.
    Nunc ultrices ultricies purus, id finibus justo eleifend sit amet.<br>
    Sed in iaculis libero, et gravida nibh.
    Proin mollis, nibh eu rhoncus scelerisque, orci ex posuere mi, id pharetra purus est suscipit sapien.
    Aliquam fermentum dignissim ultricies. Cras vitae neque tincidunt, tristique neque at, ornare leo.<br>
    Integer gravida lectus sed venenatis auctor. Vestibulum sed ligula eget dui ultrices luctus.<br>
    Etiam dapibus auctor sollicitudin. Nam vel dui non lorem semper scelerisque. Donec sed condimentum mauris.
    Maecenas ac enim sit amet orci sodales porta.
    </p>
    <img src="http://via.placeholder.com/350x150">
    <img src="http://via.placeholder.com/350x150">
    <img src="http://via.placeholder.com/350x150"><br>
    <img src="http://via.placeholder.com/350x150">
    <img src="http://via.placeholder.com/350x150">
    <img src="http://via.placeholder.com/350x150"><br>
  </div>
</div>
<div class="divider">
  <h1>About</h1>
</div>

这些位置或东西一定有问题，或者当div有背景图像时，它没有被注册为持有任何内容，所以在它上方显示了关于div。

我需要做什么？

我想在背景图像结束后显示div，并在删除图像时保留在那里。如果你需要nav html和css代码，我会把它交给你。

1 个答案:

答案 0 :(得分：0)

Answer 1

#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}

如果删除：位置：绝对; 红条会转到页面底部。

Div不应该超过Div，背景图像里面有div

1 个答案: