Question

我正在尝试使用带有导航栏的基础构建一个单页网站，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 个答案: