css背景图片大小自适应

作者：刎心封爱为伱锁情发布日期:2025-08-03 浏览:70

/* 设置背景图片大小自适应的CSS代码 */

body {
  /* 使用background属性设置背景图片 */
  background: url('your-image-url.jpg') no-repeat center center fixed;

  /* 使用background-size属性让背景图片自适应 */
  background-size: cover; /* cover表示图片会按比例缩放以覆盖整个容器 */

  /* 或者使用contain，它会让图片按比例缩放以完全显示在容器内 */
  /* background-size: contain; */

  /* 设置背景颜色（可选） */
  background-color: #cccccc;
}

解释说明：

background: 设置背景图片的路径、是否重复、定位和固定方式。
background-size: cover: 让背景图片按比例缩放以覆盖整个容器，可能会裁剪部分内容。
background-size: contain: 让背景图片按比例缩放以完全显示在容器内，可能会留白。
background-color: 设置背景颜色，当图片加载失败或未加载时显示。

上一篇：css超出...

下一篇：css计算