css background 充满自适应

/* CSS 代码示例：使背景图片充满并自适应容器 */

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

  /* 背景图片充满整个容器，同时保持比例 */
  background-size: cover;

  /* 背景图片位置居中 */
  background-position: center;

  /* 背景图片不重复 */
  background-repeat: no-repeat;

  /* 当内容超出容器时，背景颜色填充 */
  background-color: #your-fallback-color;

  /* 确保容器高度根据内容自动调整 */
  height: 100vh; /* 或者根据需要设置其他高度 */
}

解释说明：

• background-image: 指定背景图片的路径。
• background-size: cover: 使背景图片按比例缩放以完全覆盖容器，可能会裁剪图片的部分区域。
• background-position: center: 将背景图片居中显示。
• background-repeat: no-repeat: 防止背景图片重复。
• background-color: 设置一个备用颜色，当图片加载失败或在图片加载前显示。
• height: 100vh: 设置容器的高度为视口高度的100%，确保背景图片可以充满整个屏幕。可以根据具体需求调整高度。

如果你需要进一步调整，可以根据实际场景修改这些属性。