1. 背景图片基本概念
在使用CSS指定一个元素的背景时，可以使用背景颜色或者背景图片。背景图片可以是任何类型的图像文件，比如JPEG，PNG，SVG等。在CSS3中，还引入了多种新的背景图片样式，例如渐变色背景等。
2. CSS指定背景图片
2.1 使用background-image属性
要在 CSS 中指定一个元素的背景图片，可以使用background-image属性。这个属性用于指定一个图像文件的URL，例如：
div {
background-image: url("images/bg.jpg");
}
这将把div元素的背景设置为名为‘bg.jpg’的图片。注意，在URL中指定图片文件时，应该使用相对路径或者绝对路径来引用文件。
如果需要同时指定一个元素的背景颜色和背景图片，可以使用以下代码：
div {
background-color: #ccc;
background-image: url("images/bg.jpg");
}
这将把div元素的背景设置为灰色' #ccc '的背景颜色，并在其上放置名为‘bg.jpg’的图片。
2.2 CSS3的多背景属性
CSS3还引入了多背景属性。此属性可以允许您同时指定多个背景图片和颜色。例如：
div {
background: url("images/bg.jpg") no-repeat center center fixed,
url("images/bg2.jpg") no-repeat top right,
url("images/bg3.jpg") repeat-x;
}
这将使用3张图片分别设置div元素的背景。第一张图片是名为‘bg.jpg’的图片，背景图片不会重复。第二张图片是名为‘bg2.jpg’的图片，背景图片不会重复，而该图片将出现在div元素的右上角。第三张图片是名为‘bg3.jpg’的图片，背景图片将水平重复。
2.3 CSS3的渐变色背景
在CSS3中，还可以使用渐变背景。渐变背景可以设置为两种类型：线性渐变和径向渐变。线性渐变可以在两个或多个颜色之间创建平滑过渡，而径向渐变允许您将一种颜色平滑地过渡到另一种颜色。
使用CSS3的线性渐变指定背景图片的代码如下：
div {
background: linear-gradient(red, yellow);
}
此代码将为div元素指定一个从红色到黄色的线性渐变背景。可以根据需要指定更复杂的线性渐变，例如从红色到黄色，再从黄色到蓝色的渐变效果。
使用CSS3的径向渐变指定背景图片的代码如下：
div {
background: radial-gradient(circle at center, #f00, #00f);
}
此代码将为div元素指定一个从红色到蓝色的径向渐变背景。在我们的代码中，我们使用了一个圆形渐变，圆心位于背景的中心，半径为背景大小的一半。
3. CSS设置背景图片的其他属性
除了背景图片本身，还有一些CSS属性可以用于调整背景图片的其他方面。以下是其中的一些属性：
3.1 background-repeat
该属性指定了背景图片的平铺方式。默认情况下，背景图片被铺满整个元素。如果您希望该图片不重复，可以使用background-repeat: no-repeat。如果您希望该图片水平重复，可以使用background-repeat: repeat-x。如果您希望该图片垂直重复，可以使用background-repeat: repeat-y。如果您希望在水平和垂直方向都重复图片，可以使用background-repeat: repeat；
div {
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
}
3.2 background-size
该属性指定了背景图片的尺寸。可以使用pixel单位或者百分比。以下是几个示例：
div {
background-image: url("images/bg.jpg");
background-size: 100% auto; /* 100%宽度，高度自适应 */
}
div {
background-image: url("images/bg2.jpg");
background-size: cover; /* 缩放背景图片，以填满元素的整个区域 */
}
div {
background-image: url("images/bg3.jpg");
background-size: contain; /* 缩放背景图像，以适合元素的区域，同时保留其纵横比 */
}
3.3 background-position
该属性指定了背景图片的起始位置。默认情况下，背景图片从元素的左上角开始显示。可以使用不同的定位属性来更改这个位置，例如top、bottom、left、right、center等。以下是一些示例代码：
div {
background-image: url("images/bg.jpg");
background-position: center; /* 图片居中开始显示 */
}
div {
background-image: url("images/bg.jpg");
background-position: top right; /* 图片位于元素的右上角 */
}
3.4 background-attachment
该属性指定了背景图片固定或者随着元素滚动而滚动。如果您希望背景图片随元素一起滚动，请使用background-attachment:scroll。如果您希望背景图片固定在元素中，请使用background-attachment:fixed。
div {
background-image: url("images/bg.jpg");
background-attachment: fixed; /* 背景图片被固定到视口上 */
}
4. 总结
通过本文，我们了解了如何在CSS中使用背景图片，并通过更改不同的CSS属性来调整背景图片的其他方面，例如平铺方式、尺寸、定位和附着方式。无论您何时需要美化您的网页，使用背景图片都是一个很好的选择之一。