在CSS中，background-image是一种用于为元素设置背景图像的属性，支持控制图像的显示方式、位置及多图叠加等功能。下文将从其基本用法、显示模式、位置调整及多图支持等方面展开说明。

一、定义与基本用法

background-image通过指定图片的URL路径，将图像作为元素的背景。背景范围覆盖元素的全部内容区域（包括内边距和边框）。例如，以下代码为页面主体设置背景图：

body {
  background-image: url('d:/images/04.jpg');
}

需注意路径的书写规范，推荐使用相对路径或正确转义的绝对路径。若路径包含空格或特殊字符，建议用双引号包裹。

二、背景图像的显示方式

通过background-repeat属性可控制图像的平铺行为：

• ​repeat​（默认值）：图像在水平和垂直方向重复铺满元素。
• ​no-repeat​：图像仅显示一次，不平铺。
• ​repeat-x​：仅在水平方向重复，形成横向条纹背景。
• ​repeat-y​：仅在垂直方向重复，形成纵向条纹背景。

三、背景图像的位置调整

使用background-position属性可精确控制图像在元素内的显示位置。例如：

div {
  background-position: 50% 50%; /* 图像居中显示 */
  background-position-x: right; /* 水平靠右 */
  background-position-y: 20px; /* 垂直方向距顶部20像素 */
}

属性值支持百分比、关键词（如left、center）或具体数值，允许混合使用不同单位。

四、多背景图像的支持

CSS3允许为单个元素叠加多个背景图像，代码书写顺序影响图层上下关系（先定义的图像在上层）：

.box {
  background-image: url('layer1.png')， url('layer2.png');
  background-repeat: no-repeat， repeat-x; /* 为每层图像单独设置平铺方式 */
}

目前主流浏览器均支持该特性，但需注意旧版本浏览器的兼容性问题。

五、与其他背景属性的协作

background-image常与background-color、background-size等属性配合使用。例如，可同时设置纯色背景和图像背景，或通过background-size: cover实现图像自适应填充。此外，使用简写属性background可一次性定义多个背景相关参数，提升代码简洁性。