1

我正在尝试使用带有导航栏的 Foundation 构建一个单页网站，使用 4 个背景图像来分隔每个部分。使用基础图像可以很好地调整大小，但是当我关闭屏幕时，这些部分会在垂直方向上走得更远，从而在每个图像的底部显示白色的身体背景。我该如何解决这个问题，以便保持从大型浏览器屏幕到智能手机的页面比例？

这是一个带有每个图像大小的 Html 示例：

   <div id="bg">
    <img src="http://placehold.it/1900x1000" alt="">
   </div>
   <div style="background: white">
    <div class="row">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation</p>
    </div>
   </div>
   <div id="bg1">
    <img src="http://placehold.it/1900x900" alt="">
   </div>
   <div style="background: #2adefe">
    <div class="row">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation</p>
    </div>
   </div>
   <div id="bg2">
    <img src="http://placehold.it/1900x650" alt="">
   </div>  
   <div style="background: ##683b17">
    <div class="row">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation</p>
    </div>
   </div>
   <div id="bg3">
    <img src="http://placehold.it/1900x700" alt="">
   </div>
   <div style="background: black">
    <div class="row">
    </div>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation</p>
    </div>
    <div id="bg4">
     <img src="http://placehold.it/1900x400" alt="">
    </div>

以及我用于每个背景图像的 CSS 类型：

#bg {
  display: block;
  min-height: 559px;
  margin-right: auto;
  margin-left: auto;
  background-size: 100%;
  background-repeat: no-repeat no-repeat;
4

0 回答 0