CSS 背景大小属性
在 CSS 中，我们可以使用 background-size 属性来设置背景图片的大小，以适应不同的布局需求。
语法：
background-size: 数值或关键字;说明：
background-size 的取值可以是一个数值，也可以是一个关键字。
当取值为 “数值” 时，表示定义背景图片的高度和宽度。此时可以设置一个值（同时设置宽高）或两个值（分别设置宽高）。
当取值为 “关键字” 时，常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| auto（默认值） | 保持原始大小 |
| cover | 等比例缩放以完全覆盖元素，可能会导致图片部分裁切 |
| contain | 等比例缩放以完全包含在元素中，可能会在元素中留有空白 |
CSS 背景大小示例
接下来，我们通过几个简单的例子来讲解 CSS 背景大小是如何设置的。
示例 1：background-size 取值为 “数值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 500px;
height: 400px;
border: 1px solid red;
margin-top: 10px;
background-image: url("imgs/bird.jpg");
background-repeat: no-repeat;
}
div:nth-child(2) {
background-size: 500px 400px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，第 1 个 div 元素背景图片大小使用默认值（即图片实际大小），而第 2 个 div 元素使用 background-size 属性来重新定义背景图片大小。
其中，background-size: 500px 400px; 表示设置背景图片的宽度为 500px，高度为 400px。
示例 2：background-size 取值为 “关键字”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 600px;
height: 500px;
border: 1px solid red;
margin-top: 10px;
background-image: url("imgs/bird.jpg");
background-repeat: no-repeat;
}
div:nth-child(2) {
background-size:cover;
}
div:nth-child(3) {
background-size:contain;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，第 1 个 div 元素没有使用 background-size 属性，第 2 个 div 元素 background-size 属性取值为 “cover”，第 3 个 div 元素 background-size 属性取值为 “contain” ，我们可以对比理解一下。
常见问题
1．对于背景图片的大小，不是可以使用 width 和 height 这两个属性来定义吗？为什么还要增加一个 background-size 属性呢？
小伙伴们一定要搞清楚，背景图片跟普通图片（即 img 标签）是不同的东西！width 和 height 这两个属性只能用来定义 img 标签图片的大小，而不能用于控制背景图片的大小。
