在CSS中，我们可以通过背景相关属性为HTML元素添加背景图片，控制图片的显示效果。常见的实现方式分为单属性设置和复合属性设置两类，不同的写法适用于不同的开发场景。
一、单属性设置背景图片
最基础的背景图片添加方式是使用background-image属性，该属性用于指定元素的背景图片路径，语法如下：
/* 使用相对路径引入图片 */
.box1 {
width: 300px;
height: 200px;
background-image: url("../images/bg.jpg");
}
/* 使用绝对路径引入图片 */
.box2 {
width: 300px;
height: 200px;
background-image: url("https://ipipp.com/assets/bg.png");
}
仅设置background-image时，背景图片默认会按原始尺寸在水平和垂直方向重复平铺，如果需要调整重复规则，可以搭配background-repeat属性：
/* 背景图片不重复 */
.no-repeat {
background-repeat: no-repeat;
}
/* 水平方向重复，垂直方向不重复 */
.repeat-x {
background-repeat: repeat-x;
}
/* 垂直方向重复，水平方向不重复 */
.repeat-y {
background-repeat: repeat-y;
}
如果需要调整背景图片在元素中的位置，可以使用background-position属性，支持像素值、百分比和方位关键词：
/* 图片定位到元素左上角 */
.position1 {
background-position: left top;
}
/* 图片水平居中，垂直方向距离顶部20px */
.position2 {
background-position: center 20px;
}
/* 图片距离左边30px，距离顶部40px */
.position3 {
background-position: 30px 40px;
}
当背景图片尺寸和元素尺寸不匹配时，可以通过background-size属性调整图片的显示尺寸：
/* 图片宽度撑满元素，高度按比例缩放 */
.size1 {
background-size: 100% auto;
}
/* 图片完全覆盖元素，可能会裁剪部分图片 */
.size2 {
background-size: cover;
}
/* 图片完整显示在元素内，可能会留空白 */
.size3 {
background-size: contain;
}
二、复合属性设置背景图片
如果不需要单独调整每个背景属性，可以使用background复合属性一次性设置多个背景相关值，语法顺序为：背景颜色 背景图片 背景重复 背景位置/背景尺寸 背景附着方式。
/* 复合属性写法，设置背景图片不重复，定位居中，尺寸覆盖元素 */
.complex-bg {
width: 500px;
height: 300px;
background: #f5f5f5 url("../images/banner.jpg") no-repeat center/cover;
}
需要注意复合属性的顺序没有强制要求，但是background-size必须紧跟在background-position后面，用/分隔，否则属性会失效。
三、多背景图片设置
CSS还支持为一个元素设置多张背景图片，多张图片之间用逗号分隔，先设置的图片会显示在上层：
/* 设置两张背景图片，第一张在上层，第二张在下层 */
.multi-bg {
width: 400px;
height: 300px;
background:
url("../images/icon.png") no-repeat 10px 10px,
url("../images/bg.jpg") no-repeat center/cover;
}
四、常见问题说明
- 背景图片路径错误时，元素会显示无背景或者背景颜色，需要检查路径是否正确，相对路径是相对于当前CSS文件的位置。
- 如果元素没有设置宽度和高度，背景图片可能不会显示，因为默认块级元素高度由内容撑开，没有内容时高度为0。
- 背景图片不会影响元素的布局，也不会被屏幕阅读器识别，如果需要传达重要信息，不要仅用背景图片展示内容。
CSSbackground_imagebackgroundbackground-size修改时间：2026-06-11 15:45:34