background-size 是 CSS 中的一个非常实用的属性，用于控制背景图片的尺寸。它允许你指定背景图像的宽度和高度，并且可以通过不同的设置方式来适应各种设计需求。使用 background-size 可以让背景图片自适应容器的大小，或者完全按照你设定的大小显示。

语法

background-size: <width> <height>;
  • <width>：指定背景图片的宽度，可以是具体的长度单位（如 px, em, rem 等），也可以使用百分比或关键字（如 auto）。
  • <height>：指定背景图片的高度，通常与宽度一起使用，可以是具体的长度单位、百分比或 auto。

background-size 也支持以下几种常用的特殊关键字：cover 和 contain。

1. background-size 常见值

(1) 固定宽高值（具体数值）

可以使用像素（px）、百分比（%）、em、rem 等单位来设置背景图片的宽度和高度。

background-size: 300px 200px; /* 设置宽度为 300px，高度为 200px */

(2) auto 关键字

  • auto：表示背景图片的大小将根据其原始尺寸自动保持比例，通常与另一个尺寸一起使用。
background-size: 100px auto; /* 设置宽度为 100px，高度自动调整，保持图片比例 */

(3) cover 关键字

  • cover：确保背景图片完全覆盖背景区域。背景图片会被缩放，直到完全覆盖整个背景区域，可能会裁剪图片的部分内容以适应容器。
background-size: cover;

cover 通常用于使背景图片能够覆盖整个元素的背景区域，且在尺寸不匹配时可以自动裁剪图片的多余部分。

(4) contain 关键字

  • contain：确保背景图片完全包含在背景区域内。背景图片会被缩放，直到其整个图片完全适应容器，而不会被裁剪。可能会留下空白区域。
background-size: contain;

contain 适用于需要确保背景图片完整显示，不被裁剪的情况。如果容器的宽高比例与图片的宽高比例不同，图片的某些区域可能会空白。

2. background-size 示例详解

示例 1：固定宽高值

div {
  background-image: url('image.jpg');
  background-size: 500px 300px; /* 背景图片宽度为 500px，高度为 300px */
}
  • 这里，背景图片会被缩放到宽度为 500px、高度为 300px，可能导致图像的比例失衡。

示例 2：自动调整宽度或高度

div {
  background-image: url('image.jpg');
  background-size: 100% auto; /* 背景图片宽度为 100%，高度自动调整 */
}
  • 背景图片会根据容器宽度自动调整大小，保持原始比例，而高度会根据宽度自适应。

示例 3：使用 cover 填充背景

div {
  background-image: url('image.jpg');
  background-size: cover; /* 背景图片完全覆盖容器 */
  background-position: center; /* 图片居中显示 */
}
  • cover 会使图片在容器内完全覆盖，但如果容器的比例与图片的比例不一致，图片会被裁剪。图片会居中显示。

示例 4：使用 contain 保持完整性

div {
  background-image: url('image.jpg');
  background-size: contain; /* 背景图片完全显示在容器内 */
  background-position: center; /* 图片居中显示 */
}
  • contain 会确保图片完全显示，但如果容器的比例与图片的比例不同，容器的部分区域可能会留空白。

3. 设置背景图片的宽度和高度

background-size 不仅适用于背景图片的显示效果，还可以根据需求控制背景图片的缩放比例。它可以单独控制宽度和高度，或者设置两者。

示例 1：宽度为固定值，高度自动调整

div {
  background-image: url('image.jpg');
  background-size: 300px auto; /* 设置宽度为 300px，高度自动调整 */
}
  • 这里背景图片的宽度会固定为 300px，高度会按比例自动调整。

示例 2：宽度和高度都按百分比调整

div {
  background-image: url('image.jpg');
  background-size: 50% 100%; /* 宽度为容器宽度的 50%，高度为容器高度的 100% */
}
  • 这种方式可以让背景图片的宽高分别根据容器的百分比来调整。

4. 背景图像在不同设备上的适配

通过 background-size，你可以使背景图片在不同设备和屏幕大小下自适应。结合 cover 和 contain，你可以确保图片在响应式布局中良好的表现。

示例：响应式背景

div {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh; /* 视口高度 */
}
  • 这里，背景图会始终覆盖整个视口，随着屏幕的变化，图像会调整大小来确保覆盖背景区域，同时保持居中显示。

5. background-size 与其他背景属性的结合使用

你还可以将 background-size 与其他背景属性（如 background-repeat 和 background-position）结合使用，创造出更精细的效果。

示例：不重复的背景图片，适应容器尺寸

div {
  background-image: url('image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 300px;
}
  • 通过 background-repeat: no-repeat，背景图片不会重复，使用 background-size: cover 确保背景图完全覆盖整个容器，且图片保持居中。

总结

  • background-size 用于控制背景图片的尺寸，可以用固定的宽度、高度，或使用 cover 和 contain 来使背景图适应容器。
  • 通过合理地设置 background-size，你可以确保背景图片在不同大小的容器中保持合适的显示效果，避免图片失真或裁剪。
  • 结合其他背景属性，如 background-position、background-repeat，可以创建更精确和灵活的背景布局。

掌握 background-size 的使用方法，可以帮助你在网页设计中更加精细地调整背景图片的显示效果。