CSS实现背景图片全屏铺满自适应的方式（3种）

在CSS中，可以使用多种方法来实现背景图片的全屏铺满和自适应。以下是三种常见的方法：

1. 使用background-size属性设置为cover，这样背景图片会被缩放到适当大小，保持其宽高比，同时确保元素的所有内容都被背景图片覆盖。

.fullscreen-background {
  background-image: url('path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* Full height of the viewport */
  width: 100vw; /* Full width of the viewport */
}

2. 使用background-size属性设置为100% 100%，这样背景图片会被拉伸以完全覆盖元素，可能会导致图片变形。

.fullscreen-background {
  background-image: url('path/to/your/image.jpg');
  background-size: 100% 100%;
  height: 100vh;
  width: 100vw;
}

3. 使用background-size属性设置为contain，这样背景图片会被缩放到适当大小，保持其宽高比，同时不超出元素的边界。

.fullscreen-background {
  background-image: url('path/to/your/image.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
}

以上代码中，.fullscreen-background是你要应用背景的元素的类名。你需要将path/to/your/image.jpg替换为你的实际图片路径。使用height: 100vh;和width: 100vw;可以确保元素的大小与视口大小相匹配。