4种CSS实现全屏背景图片铺满自适应的方式，最后一种尤其简单

/* 方法1: 使用CSS3的background-size属性 */
body {
  background: url('bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
 
/* 方法2: 使用背景图片作为body的背景图片，并设置大小 */
body {
  background: url('bg.jpg') no-repeat center center;
  background-size: 100% 100%;
}
 
/* 方法3: 使用伪元素来实现全屏背景图 */
body {
  position: relative;
}
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('bg.jpg') no-repeat center center;
  background-size: cover;
  z-index: -1;
}
 
/* 方法4: 使用CSS3的@media查询来适配不同的屏幕尺寸 */
@media screen and (max-width: 1920px) {
  body {
    background: url('bg-large.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}
 
@media screen and (max-width: 1024px) {
  body {
    background: url('bg-medium.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}
 
@media screen and (max-width: 640px) {
  body {
    background: url('bg-small.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

这段代码提供了四种不同的方法来实现全屏背景图的自适应。第一种和第二种方法使用了background-size: cover;属性，这样背景图会自动缩放并居中，保持图片的比例不变。第三种方法使用了伪元素::after，这样可以在不影响其他内容的情况下给body添加背景。最后一种方法通过媒体查询适配不同的屏幕尺寸，加载不同分辨率的背景图片。