CSS background-image 语法
在 CSS 中，background-image 属性用于定义元素的背景图片。
语法：
background-image: url(路径);说明：
url() 是一个 CSS 函数，它的参数是一个图片路径。此外，background-image 也可以使用其他 CSS 函数（如渐变函数）作为值：
linear-gradient()：用于创建线性渐变。radial-gradient()：用于创建径向渐变。conic-gradient()：用于创建锥形渐变。repeating-linear-gradient()：用于创建重复的线性渐变。repeating-radial-gradient()：用于创建重复的径向渐变。repeating-conic-gradient()：用于创建重复的锥形渐变。
注意: 元素必须有宽度和高度（可以由 width 和 height 定义，也可以由子元素撑开），background-image 才会有效果。
CSS background-image 摘要
| 属于 | CSS 背景图片 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS background-image 示例
接下来，我们通过几个简单的例子来讲解一下 CSS background-image 属性是如何使用的。
示例 1：background-image 定义背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-image: url("imgs/bird.jpg");
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
bird.jpg 这张图片的实际尺寸为 200px × 200px，这里也将 div 元素的尺寸同样设置为 200px × 200px，这样背景图片刚好铺满 div 元素。
特别注意，元素必须要有一定的宽度和高度，背景图片才会生效。如果把上面 div 的宽高删除，此时背景图片就不会显示出来了。小伙伴们可以自行试一下。
此外，下面两种引入背景图片的方式都是正确的，一个给路径加上了引号，另一个没加引号。
/* 写法 1：不加引号 */
background-image: url(imgs/bird.jpg);
/* 写法 2：加引号（推荐） */
background-image: url("imgs/bird.jpg");不过在实际开发中，推荐使用加引号的方式（即写法 2），因为这种写法可以避免特殊字符引发的问题。URL 中包含特殊字符（如空格、#、& 等），不加引号可能导致解析错误，比如：
background-image: url(imgs/my image.jpg); /* 错误：空格导致解析失败 */
background-image: url("imgs/my image.jpg"); /* 正确 */此外，很多 CSS 预处理器（如 SASS、LESS）和构建工具在处理 url() 时，默认会生成带引号的 URL。
示例 2：background-image 定义线性渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background-image: linear-gradient(to right, red, yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，background-image 取值是一个 linear-gradient() 函数，此时表示创建一个线性渐变。小伙伴们也可以尝试其他渐变函数。
示例 3：background-image 设置多个背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-image: url("imgs/bird.jpg"), url("imgs/goat.jpg"); /* 两个背景图片 */
background-repeat: no-repeat; /* 防止重复 */
background-position: top left, bottom right; /* 设置位置 */
background-size: 100px 100px; /* 背景图片大小 */
background-color: lightskyblue; /* 背景颜色 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们设置了两张背景图片：bird.jpg 和 goat.jpg。它们会按照指定的顺序堆叠。其中，background-repeat 用于定义背景重复，background-position 用于定义背景图片的位置，background-size 用于定义背景图片的大小。
注意: 当设置多张背景图片时，代码中排在最前面的图片会显示在最顶层，排在后面的图片会显示在下方。如果图片有重叠，则前面的会盖住后面的。
