#CSS 的背景
CSS 中的 background 属性用于设置元素的背景，功能非常强大，可以控制背景颜色、背景图像、背景位置、大小、重复方式等。
你可以使用简写属性 background，也可以分别使用以下子属性。
| 属性 | 描述 | 示例 |
|---|---|---|
background-color | 背景颜色 | background-color: #f0f0f0; |
background-image | 背景图像 | background-image: url('bg.jpg'); |
background-repeat | 是否重复 | background-repeat: no-repeat; |
background-position | 背景图像的位置 | background-position: center top; |
background-size | 背景图像大小 | background-size: cover; |
background-attachment | 是否随滚动 | background-attachment: fixed; |
background-origin | 背景图像定位区域 | background-origin: padding-box; |
background-clip | 背景绘制区域 | background-clip: content-box; |
示例：
<!-- 背景图片 -->
<div style="background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
背景图片
<!-- 背景图片，居中 -->
<div style="background-position:center; background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
居中
<!-- 背景图片，居中，不重复 -->
<div style="background-repeat: no-repeat; background-position:center; background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
不重复
<!-- 背景图片，居中，不重复，拉伸 -->
<div style="background-size: cover; background-repeat: no-repeat; background-position:center; background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
拉伸