1. What？
background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。- 可以在一次声明中定义一个或多个属性：
background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment。
- 对于所有简写属性，任何没有被指定的值都会被设定为它们的 初始值
background-clip // 延展
background-color // 颜色
background-image // 图片
background-origin // (sup)定位
background-position // (sub)定位
background-repeat // 重复
background-size // 大小
background-attachment // 固定/滚动
2. 用法
2.1. background-clip
- 设置元素的背景（背景图片或颜色）是否延伸到边框下面
- 即，图像与盒子以及盒子的边框的关系
- 有4个值：
border-box : 背景延伸至边框外沿（但是在边框下层）
padding-box : 背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box : 背景被裁剪至内容区（content box）外沿
text : 背景被裁剪成文字的前景色(有兼容问题， 需要加前缀)，可以实现背景填充文字的效果，且与 -webkit-text-fill-color: transparent 一起使用
2.2. background-color
- 设置背景颜色
- 值为颜色值或
transparent
2.3. background-image
- 为一个元素设置一个或者多个背景图像。图像在绘制时，以 z 方向堆叠的方式进行。先指定的图像会在后指定的图像上绘制。
- 使用
url() 引入图片
2.4. background-origin
- 定 background-position 属性相对于什么位置来定位，需要已经设置背景图片
- 三个属性值：
border-box : 从border区域（含border）开始显示背景图像
padding-box : 从padding区域（含padding）开始显示背景图像
content-box : 从content区域开始显示背景图像
2.5. background-position
- 规定背景图像的定位位置，需要已经设置了背景图片
- 语法：
background-position:<position> [<position>]，第二个值可选；第一个值规定水平
- 值：
top : 顶部
left : 左边
center : 中间
right : 右边
boottom : 底部
百分比：可以为负值
- 如果之规定了第一个
position，那么第二个值就是 center
2.6. bacground-repeat
- 设置是否及如何重复背景图像。它会根据background-position的值来进行重复，而且需要已经设置背景图片
repeat-x : 背景图像在横向上平铺repeat-y : 背景图像在纵向上平铺repeat : 背景图像在横向纵向平铺no-repeat : 背景图像不平铺round : 背景图像自动缩放直到适应且填充满整个容器space : 背景图像以相同的间距平铺且填充满整个容器或某个方向
2.7. background-size
- 规定背景图像的大小，需要已经设置了背景图片
- 可以设置两个值，第二个值可选；第一个值设置宽度，第二个值设置高度
length : 设置背景图像的高度和宽度。可以是任何单位。如果只设置一个值，则第二个值会被设置为 “auto”percentage : 以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值，则第二个值会被设置为 “auto”cover : 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器contain : 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
2.8. background-attachment
- ：设置背景图像是否固定或者随着页面的其余部分滚动，需要已经设置了背景图像
- 可设置两个值，第二个值可选；第一个用于横向，第二个用于纵向
fixed : 背景图像相对于窗体固定scroll : 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动local : 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容
