CSS 如何将 background-size 设置为 “cover”，以及一些额外的内容

在本文中，我们将介绍如何使用 CSS 将 background-size 设置为 “cover”，并说明一些与背景尺寸有关的其他功能。

阅读更多：CSS 教程

什么是 background-size?

在 CSS 中，background-size 属性用于设置背景图片的尺寸。它指定背景图片相对于元素的大小应该如何调整或布局。

使用 background-size: cover

background-size 属性有几个可选值，其中之一是 “cover”。当设置为 “cover” 时，背景图片将会被拉伸或收缩，以完全覆盖元素的宽度和高度，同时保持图片的宽高比例不变。这样可以确保背景图片始终填满整个元素区域，不会在宽度或高度方向上留下空白。

以下是一个使用 “cover” 值的示例：

/* HTML */
<div class="container"></div>

/* CSS */
.container {
  width: 300px;
  height: 200px;
  background-image: url("background.jpg");
  background-size: cover;
}

在上面的示例中，容器元素的宽度为 300 像素，高度为 200 像素。通过设置 background-size 为 “cover”，背景图像将被缩放，确保填满整个容器，同时保持其比例。

使用 background-size: contain

除了 “cover”，还有另一个常用的值是 “contain”。当设置为 “contain” 时，背景图片将被缩放，以适应元素的宽度或高度，同时保持图片的宽高比例。这样能够确保整个背景图像都可见，但可能会在元素的某个方向上留有空白。

以下是一个使用 “contain” 值的示例：

/* HTML */
<div class="container"></div>

/* CSS */
.container {
  width: 300px;
  height: 200px;
  background-image: url("background.jpg");
  background-size: contain;
}

在上面的示例中，容器元素的宽度为 300 像素，高度为 200 像素。通过设置 background-size 为 “contain”，背景图像将被缩放，以适应容器的大小，同时保持其比例。

背景图像尺寸自动调整

背景图片的尺寸可以使用具体的像素值、百分比，也可以使用关键字来设定。在某些情况下，我们可能希望背景图片按照其原始大小进行展示，而不进行任何缩放。这时，我们可以将 background-size 设置为 “auto”。

/* HTML */
<div class="container"></div>

/* CSS */
.container {
  width: 300px;
  height: 200px;
  background-image: url("background.jpg");
  background-size: auto;
}

在上面的示例中，容器元素的宽度为 300 像素，高度为 200 像素。通过设置 background-size 为 “auto”，背景图像将会以其原始尺寸进行展示，不会进行任何缩放。

background-size 与背景重复

除了控制背景图片尺寸，background-size 属性还可以与 background-repeat 属性一起使用，以控制背景图片的重复方式。

/* HTML */
<div class="container"></div>

/* CSS */
.container {
  width: 300px;
  height: 200px;
  background-image: url("background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

在上面的示例中，通过设置 background-repeat 为 “no-repeat”，可以防止背景图片在元素中重复出现。结合 background-size 的 “cover” 值，背景图片将完全覆盖容器，同时保持其比例。

总结

通过本文的介绍，我们了解了如何使用 CSS 将 background-size 设置为 “cover”，以及一些与背景尺寸相关的其他功能。我们可以通过设置 “cover” 或 “contain”，来控制背景图片的缩放和填充方式。同时，我们还可以结合 background-repeat 属性，来调整背景图片的重复方式。希望上述内容对你学习和使用 CSS 背景尺寸有所帮助。