图片作为背景页面固定的书写方式

这是在修改别人代码上遇到的问题，我在写一个新的功能的制作页面表格时，内容已经超出了页面范围，但是，竟然不会出现滚轮。我还怀疑是不是我哪里使用有问题，郁闷了好一会儿。

今天早上过来重新调整样式发现，原来是原先书写代码的学长，定义背景图片使用的方式是通过

.container {
  position: fixed;
  width: 100%;
  height: 100%;
}

.bg1 {
  background-image: url("../assets/image/背景图.png");
  background-size: 100% 100%;
}

.bg2 {
  background-image: url("../assets/image/背景图2.png");
  background-size: 100% 100%;
}

这种方式定义的，我大为震惊。。。如果也没内容都只有这么点还好，但是如果超出了，这。。。

怪不得我说，相同的代码，我的测试页面上面有滚轮，这里没有。原来是给定死了，，，，

这是我修改后的代码

.container {

  /* position: fixed; */

  width: 100%;

  height: 100%;

}


.bg1 {

  background-image: url("../assets/image/背景图.png");

  /* background-size: 100% 100%; */

  background-size: cover;

  position: absolute;

  overflow: auto;

}


.bg2 {

  background-image: url("../assets/image/背景图2.png");

  /* background-size: 100% 100%; */

  background-size: cover;

  position: absolute;

  overflow: auto;

}

总体上来说，页面的效果不会有太大的变化，你无论是放大还是缩小，都不会改变你的背景图样式。就是一个定死的状态。

但是，最大的不同点就是，我们知道position:fixed; 是在当前窗口上面定死位置展示，而后者就是通过

  background-size: cover;

  position: absolute;

  overflow: auto;

这三段代码进行控制

然后补充一下注意点（搜索了一下补充一下）：  background-size: cover;

解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。

            2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。

overflow: auto：这个就是你超出页面范围的设置了，看你想怎么设置的问题，我是设置成超出我设置的盒子高度 则会出现滚轮（就是日常页面右边的那个可以下拉的条子，一时间忘了怎么叫）

然后，如果愿意的话，其实也可以通过获取整个窗口的高度和宽度来控制图片样式的大小这样。但是我个人觉得是比较麻烦，

---

又是一个样式一搓头发的一天