上查看所有课程
CSS background-image 属性用于在元素或网页上添加背景图片。例如：
body {
background-image: url("girl-avatar.png");
}浏览器输出
在这里，background-image 属性将指定的图片设置为 body 元素的背景。
Background-Image 语法
background-image 属性的语法如下：
background-image: url(path-to-image) | none | initial | inherit;这里，
url(path-to-image): 指定图片的 URL，none: 不显示图片（默认值）initial: 将属性设置为其默认值inherit: 从其父元素继承属性。
CSS Background-Image 示例
我们来看一个 background-image 属性的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-image</title>
</head>
<body>
<!-- Using CSS background-image property to set the background image of body -->
</body>
</html>body {
background-image: url("https://programiz.com.cn/blog/content/images/2022/03/Banner-Image-1.png");
}浏览器输出
在上面的示例中，背景图片是重复的。如果图片小于容器元素，则图片会在水平和垂直方向重复。并且剩余的图片会从容器的边缘剪裁。
CSS Background-Image 属性
我们可以使用不同的背景图片属性来自定义背景图片。我们来看一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-image</title>
</head>
<body>
<!-- Using CSS background-image property to set the background image of body -->
</body>
</html>body {
background-image: url("../assets/background-image.png");
background-image: url("https://programiz.com.cn/blog/content/images/2020/11/intro-c-banner-1-1.png");
/* doesn't allows the image to repeat */
background-repeat: no-repeat;
/* scales the image proportionally to cover the background */
background-size: cover;
/* centers the image in the center of the background */
background-position: center;
/*sets the height of the body to 100viewport height */
height: 100vh;
}浏览器输出
在上面的示例中，我们使用了 background-repeat、background-size 和 background-position 属性。下面是一些常用的自定义背景图片的属性：
| 属性 | 描述 |
|---|---|
| background-repeat | 指定背景图片是否应该重复 |
| background-attachment | 指定背景图片应该固定还是随页面其余内容滚动 |
| background-size | 指定背景图片的大小 |
| background-position | 指定背景图片在元素内的位置 |
| background-clip | 指定背景区域为 border-box、content-box 或 padding-box |
| background-origin | 指定背景图片在元素内的起始位置 |
多重背景
background-image 属性还允许我们为一个元素设置多个背景图片。我们可以在 background-image 属性中提供多个用逗号分隔的 url。
图片会一层一层地堆叠在一起。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-image</title>
</head>
<body>
<!-- Using CSS background-image property to set multiple background images of body -->
</body>
</html>body {
height: 100vh;
/* url for two images respectively */
background-image: url("https://programiz.com.cn/blog/content/images/2022/03/Banner-Image-1.png"),
url("https://img.freepik.com/free-vector/leaves-background-color-year_23-2148380575.jpg?size=626&ext=jpg&ga=GA1.2.1929559493.1681795349&semt=ais");
/* sets first image width to 400px and scales the second image to
cover background area */
background-size: 400px, cover;
/* both images stopped from repeating */
background-repeat: no-repeat;
}浏览器输出
在上面的示例中，我们使用了两张背景图片（女孩头像图片和深蓝色背景图片）来设置 body 元素的背景。第一张添加的图片（女孩头像）堆叠在第二张添加的图片（深蓝色背景图片）之上。
此外，我们还使用了 background-size、background-position 和 background-repeat 属性来自定义背景。
使用背景颜色作为后备
通常的做法是为 background-image 指定一个 background-color 作为后备。这可以确保在图片加载失败的情况下，网站仍能保持一致的外观。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-image</title>
</head>
<body>
<h1>Using background color as fallback for image</h1>
</body>
</html>body {
background-color: lightblue;
background-image: url("https://programiz.com.cn/blog/content/images/2020/11/intro-c-banner-1-1.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
}浏览器输出
在上面的示例中，如果 background-image 加载失败，则 background-color 将设置为 lightblue，并且我们的文本仍将可见并与设计保持一致。
假设我们的 background-image 加载失败，那么我们将看到以下浏览器输出：
