html - 如何将 HEAD 和 Middle 以及 BOTTOM 图像设置为我网页的背景？

Question

我有 3 张照片，我愿意将它们制作成头像背景、中间背景和最后的底部背景，有什么想法我该怎么做吗？感谢和善意与你同在!

• 这张照片:https://imgur.com/a/p3FsmIf - 显示我最终制作的背景正在缩放以适合浏览器，但顶部和底部的照片没有缩放，因为我制作了另一个较小的窗口来显示它。

• 我这里的当前代码:`

    <style type="text/css">
    body {
            background-image: url("TBG_02.jpg");
            background-color: #cccccc;
            background-size: cover;
            background-repeat: no-repeat;
         }
      #top,#bottom{width:100%;}
      #top,#bottom{height:200px;}
      #bottom{position: fixed;right:0;bottom:0;}
      .topp{background-image: url("BG_02.png");background-repeat: no-repeat;}
      .bottomm{background-image:url("BG_03.png");background-repeat: no-repeat;position:fixed;}
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
  

  `我还想解决我的图像没有粘在底部 * 它向上一点 * 的问题。

Answer 1

我不太确定你想在这里做什么，但我猜你的意思是你有这段代码:

<div id="header"></div>
<div id="middle"></div>
<div id="bottom"></div>

并希望每个 div 具有不同的背景图片，在这种情况下，您可以执行以下操作；只需保留现有的 div 元素并添加此 css:

#header{
background-image: url("yourImage0.jpg");
}

#middle{
background-image: url("yourImage1.jpg");
}

#bottom{
background-image: url("yourImage2.jpg");
}