在 CSS 中，我们可以使用 background 属性及其相关的子属性来定义元素的背景效果，包括背景颜色、背景图片、背景平铺、背景位置等。
CSS 背景属性
CSS 提供了丰富的背景属性，允许我们对元素的背景进行各种各样的设置。其中，常用的背景属性如下。
1. background-color
background-color 属性用于定义元素的背景颜色。
语法：
background-color: 颜色值;说明：
background-color 属性的取值是一个颜色值，可以是关键字、十六进制值、RGB 值、RGBA 值等。
例如，background-color: red; 表示将元素的背景颜色设置为红色。
2. background-image
background-image 属性用于定义元素的背景图片。
语法：
background-image: url(url);说明：
background-image 属性的取值是一个 url() 函数，用于指定背景图片的路径。
例如，background-image: url("imgs/bg.jpg"); 表示将路径为 "imgs/bg.jpg" 的图片设置为元素的背景图片。
3. background-repeat
background-repeat 属性用于定义背景图片的平铺方式。
语法：
background-repeat: 关键字;说明：
background-repeat 的取值是一个关键字。
repeat（默认值）：表示背景图片在水平和垂直方向上都平铺。repeat-x：表示背景图片仅在水平方向上平铺。repeat-y：表示背景图片仅在垂直方向上平铺。no-repeat：表示背景图片不平铺。
4. background-position
background-position 属性用于定义背景图片的位置。
语法：
background-position: x-position y-position;说明：
background-position 属性的取值可以是长度值（px、%、em 等）或关键字（top、bottom、left、right、center）。x-position 表示背景图片在水平方向上的位置，y-position 表示背景图片在垂直方向上的位置。
例如，background-position: center center; 表示将背景图片在元素中水平居中和垂直居中。
5. background-size
background-size 属性用于定义背景图片的大小。
语法：
background-size: 数值或关键字;说明：
background-size 的取值可以是一个数值，也可以是一个关键字。
当取值为数值时，表示指定背景图片的高度和宽度。此时可以设置一个值（同时设置宽高）或两个值（分别设置宽高）。
当取值为关键字时，常用取值如下。
auto（默认值）：表示背景图片保持其原始大小。cover：表示背景图片等比例缩放以完全覆盖元素，可能会导致图片部分裁切。contain：表示背景图片等比例缩放以完全包含在元素中，可能会在元素中留有空白。
6. background-attachment
background-attachment 属性用于定义背景图片是否随着页面滚动而滚动。
语法：
background-attachment: 关键字;说明：
background-attachment 的取值是一个关键字，常用取值如下。
scroll（默认值）：表示背景图片会随着页面滚动而滚动。fixed：表示背景图片固定在视口中，不会随着页面滚动而滚动。local：表示背景图片会随着元素的内容滚动而滚动。
7. background
background 属性是一个复合属性，用于在一个声明中定义所有的背景属性。
语法：
background: background-color background-image background-repeat background-position background-size background-attachment background-origin background-clip;说明：
background 属性可以按任意顺序设置，可以省略不需要设置的属性。
提示: 在实际开发中，background 简写也很常用，因为它能显著减少代码量。更重要的是，简写属性具有 “重置” 效果，能防止之前的样式污染。
CSS 背景示例
接下来，我们通过几个简单的例子来讲解 CSS 背景属性是如何使用的。
示例 1：background-color 设置背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 150px;
/* 设置背景颜色 */
background-color: lightskyblue;
}
</style>
</head>
<body>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 background-color 属性来设置 div 元素的背景颜色为 lightskyblue。
示例 2：background-image 设置背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
/* 设置背景图片 */
background-image: url("imgs/goat.jpg");
background-size: 200px 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 background-image 属性来定义元素的背景图片。其中，url("imgs/goat.jpg") 指定了背景图片的路径为 "imgs/goat.jpg"。
此外，background-size: 200px 200px; 表示限制背景图片的宽度和高度都是 200px，刚好与 div 元素的宽高相同。
示例 3：background-repeat 设置背景平铺
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 200px;
border: 1px solid gray;
background-image: url("imgs/flower.svg");
/* 设置背景图片不平铺 */
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，background-repeat: no-repeat; 表示使得背景图片只显示一次，也就是不进行平铺。
如果改为 background-repeat: repeat-x;，此时页面效果如下图所示。
如果改为 background-repeat: repeat-y;，此时页面效果如下图所示。
如果改为 background-repeat: repeat;，此时页面效果如下图所示。
示例 4：background-position 设置背景位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 200px;
border: 1px solid gray;
background-image: url("imgs/flower.svg");
/* 设置背景图片不平铺 */
background-repeat: no-repeat;
/* 设置背景图片居中显示 */
background-position: center center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
background-position: center center; 表示将背景图片在元素中水平居中和垂直居中显示。
示例 5：background-size 设置背景大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid gray;
background-image: url("imgs/flower.svg");
/* 设置背景图片不平铺 */
background-repeat: no-repeat;
/* 设置背景图片的大小 */
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，background-size: cover; 表示将背景图片等比例缩放以完全覆盖元素。如果背景图片本身比例与元素的宽高比例不一致，可能会导致图片部分裁切。
示例 6：background 复合属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 200px;
border: 1px solid gray;
/* 使用复合属性 */
background: url("imgs/flower.svg") no-repeat center center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 background 这个复合属性来在一个声明中设置多个背景属性。下面 2 种写法是等价的。
/* 写法 1 */
background: url("imgs/flower.svg") no-repeat center center;
/* 写法 2 */
background-image: url("imgs/flower.svg");
background-repeat: no-repeat;
background-position: center center;