前言

最近在跟着 pink 老师在学习 html和css

在做学成在线项目的时候，对于 banner 模块制作的时候，在我对页面进行缩放操作的时候发现

页面并没有像我想象中那样 背景无限衍射，而是成了以下这种情况

原因

看这两张图便知

默认的全宽是浏览器缩放时右上角显示的宽度

而这个宽度是会跟着我们的缩放操作而变化的

我目前的解决方法

由于我的版心宽度是 1200px

故我设置背景所在盒子的最小宽度为 1200px

并让他靠上且居中对其，这样便完美解决了

.banner {
    min-width: 1200px;
    background-position: top;
}