CSS图片背景属性详解

CSS中用于设置图片背景的属性主要包括以下几个关键属性，可用于控制背景图片的显示方式、位置、重复行为等。

background-image

设置元素的背景图片，使用url()函数指定图片路径。支持多张图片叠加，先定义的图片层级在上。

.example {
  background-image: url("image.jpg");
}

background-size

控制背景图片的尺寸，常用值包括：

• cover：图片等比缩放至完全覆盖容器，可能裁剪部分内容
• contain：图片等比缩放至完整显示在容器内
• 具体尺寸值：如100px 200px或50% 80%

.example {
  background-size: cover;
}

background-position

定义背景图片的起始位置，默认是0% 0%（左上角）。可以使用关键词（top/center/bottom left/center/right）、百分比或具体长度值。

.example {
  background-position: center right;
}

background-repeat

控制背景图片的重复方式：

• repeat：默认值，双向重复
• no-repeat：不重复
• repeat-x/repeat-y：仅水平/垂直重复

.example {
  background-repeat: no-repeat;
}

background-attachment

决定背景图片是否随页面滚动：

• scroll：默认值，背景随元素滚动
• fixed：背景相对于视口固定
• local：背景随元素内容滚动

.example {
  background-attachment: fixed;
}

background-origin

指定背景图片的定位区域：

• padding-box：相对于内边距框定位（默认）
• border-box：相对于边框框定位
• content-box：相对于内容框定位

.example {
  background-origin: content-box;
}

background-clip

定义背景的绘制区域：

• border-box：延伸到边框外边缘（默认）
• padding-box：延伸到内边距外边缘
• content-box：仅延伸到内容边缘

.example {
  background-clip: padding-box;
}

background-color

设置背景颜色，当背景图片不可用时显示。建议始终作为后备方案设置。

.example {
  background-color: #f0f0f0;
}

复合写法

使用background简写属性可以同时设置多个背景属性：

.example {
  background: #f0f0f0 url("image.jpg") no-repeat center/cover fixed;
}

顺序一般为：[color] [image] [repeat] [attachment] [position/size]，其中size必须跟在position后且用/分隔。

多背景图

现代浏览器支持为一个元素设置多个背景图，用逗号分隔各组参数：

.example {
  background: 
    url("image1.png") left top no-repeat,
    url("image2.jpg") right bottom/contain;
}

先定义的图片层级更高，会覆盖后定义的图片。