前端让背景图片铺满整个页面：3种方法详解

本文将介绍三种常用的前端方法，让背景图片铺满整个页面，并附带代码示例和注意事项，帮助开发者快速实现页面背景图片的完美展示。

在 CSS 中使用 background-size 属性来控制背景图片的大小，设置为 cover 即可让图片铺满整个页面：

body {
  background-image: url('your-image-url');
  background-size: cover;
}

可以将背景图片作为一个绝对定位的元素，设置宽高为 100% 即可：

body {
  position: relative;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

然后在 HTML 中添加一个空的 div 元素，作为背景图片的容器：

<body>
  <div id='background-image'></div>
  <!-- 其他内容 -->
</body>

可以使用 viewport 单位来设置背景图片的大小，这样图片会随着页面大小的改变而自适应：

body {
  background-image: url('your-image-url');
  background-size: 100vw 100vh;
}

注意：在使用 viewport 单位时，需要考虑到页面的滚动条，可以使用 position: fixed 来固定背景图片，避免滚动时出现空白区域。