css背景图片自适应

/* CSS背景图片自适应 */

body {
  /* 设置背景图片 */
  background-image: url('your-image-url.jpg');

  /* 背景图片平铺方式：no-repeat 表示不平铺 */
  background-repeat: no-repeat;

  /* 背景图片定位：center 表示居中显示 */
  background-position: center;

  /* 背景图片大小：cover 表示图片按比例缩放以覆盖整个容器 */
  background-size: cover;

  /* 当内容超出容器时，是否显示滚动条 */
  overflow: hidden;
}

/* 如果需要确保背景图片在所有设备上都自适应，可以使用以下代码 */
@media (max-width: 768px) {
  body {
    /* 在小屏幕上调整背景图片的大小 */
    background-size: contain;
  }
}

解释说明：

1. background-image: 指定背景图片的路径。
2. background-repeat: 设置背景图片是否重复。no-repeat表示背景图片只显示一次，不会平铺。
3. background-position: 设置背景图片的位置。center表示背景图片居中显示。
4. background-size: 设置背景图片的大小。cover表示图片按比例缩放以覆盖整个容器；contain表示图片按比例缩放以完全显示在容器内。
5. overflow: 设置当内容超出容器时的行为。hidden表示隐藏超出部分。

通过这些设置，背景图片可以在不同屏幕尺寸和分辨率下自适应显示。