CSS背景相关属性

CSS背景相关的属性包括：

1. background-color: 设置元素的背景颜色。
2. background-image: 设置元素的背景图像。
3. background-repeat: 设置背景图像是否及如何重复。
4. background-position: 设置背景图像的位置。
5. background-size: 设置背景图像的大小。
6. background-clip: 设置背景的绘制区域。
7. background-origin: 设置背景图片的定位区域。
8. background-attachment: 设置背景图像是否固定或与页面滚动。
9. background: 简写属性，用于设置上述所有背景属性。

示例代码：

/* 设置背景颜色为灰色 */
.element {
  background-color: #808080;
}
 
/* 设置背景图片，不重复，位置在左上角 */
.element {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: left top;
}
 
/* 设置背景图片，覆盖整个元素，不重复，居中 */
.element {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
 
/* 简写形式，设置多个背景值 */
.element {
  background: #808080 url('image.jpg') no-repeat center center;
}
 
/* 设置背景大小，居中，不溢出 */
.element {
  background-size: contain;
  background-position: center;
  background-origin: content-box;
}

简写形式的 background 属性可以包含多个背景值，按照以下顺序：

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

简写时，这些值之间用空格隔开，省略某个值则用关键字 initial、inherit 或 unset 代替。