English
资源说明：在CSS中，`background-size`属性是一个非常重要的样式，它用于控制背景图像的尺寸，从而影响元素背景的显示效果。这个属性允许我们精确地设定背景图像的宽度和高度，或者使用预定义的值来实现特殊效果。以下是关于`background-size`属性的详细解释：
`background-size`可以接受一个或两个值。当提供两个值时，第一个值表示背景图像的宽度，第二个值表示背景图像的高度。这两个值可以是绝对单位（如像素`px`）或者是相对单位（如百分比 `%`），也可以是关键字 `auto`。如果只提供一个值，那么另一个值默认为 `auto`，这意味着背景图像将根据需要自动调整其高度以保持原始宽高比。
例如：
```css
div {
background-image: url(test.png);
background-repeat: no-repeat;
background-size: 100px;
}
```
等同于：
```css
div {
background-image: url(test.png);
background-repeat: no-repeat;
background-size: 100px auto;
}
```
在这个例子中，背景图像的宽度被设置为100像素，而高度自动调整以保持原图的宽高比。
除了直接设置宽度和高度，`background-size`还提供了两个特殊的关键词值：`cover`和`contain`。
- `cover`：这个值会保持图像原有的宽高比，同时尽可能地缩放图像，使其完全覆盖元素的背景区域。如果图像的宽度或高度大于元素的相应尺寸，图像会被裁剪以适应背景区域。这通常用于创建全屏背景或者希望背景图像完全填充元素的情况。
```css
div {
background-image: url(test.png);
background-repeat: no-repeat;
background-size: cover;
}
```
- `contain`：这个值同样保持图像的宽高比，但会缩放图像，确保图像的宽度或高度至少能完全适应元素的背景区域。这意味着图像的两侧可能会有空白，但它会完整地显示在元素内部。
```css
div {
background-image: url(test.png);
background-repeat: no-repeat;
background-size: contain;
}
```
`cover`和`contain`两个值都是为了适应元素的背景区域，但它们处理图像的方式不同。`cover`倾向于填充，可能会裁剪部分图像，而`contain`则倾向于适应，保证图像的完整显示。
在实际应用中，`background-size`属性经常与`background-position`和`background-repeat`属性结合使用，以实现更复杂的背景效果。例如，通过调整`background-position`，我们可以控制背景图像在元素中的位置，而`background-repeat`可以控制图像是否平铺、沿哪个轴重复等。
`background-size`是CSS中一个强大的工具，它为我们提供了灵活的方式来控制背景图像的展示，无论是简单的尺寸调整还是复杂的全屏背景效果，都可以通过这个属性轻松实现。理解并熟练运用`background-size`，能够极大地提升网页设计的视觉效果和用户体验。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
