CSS属性background是一个简写属性，它是对background-color、background-image、background-repeat、background-position、background-size、background-attachment、background-origin、background-clip等CSS属性的简写，由于background属性是同时设置多个背景相关的属性，多个属性值之间使用空格隔开，整体上没有顺序要求，具体语法参照MDN推荐写法。
开始需知
- 所有的背景相关属性适用于所有的元素,不管是块元素还是行内元素,且其不具备继承性,不会被子元素继承应用。
- 背景区域：边框区域+内边距区域+内容区区域（固定的），可以理解为背景颜色的背景区域。
- 容器的区域（自拟的）：直接包含背景图片的区域(可变的)，默认为 内边距区域 + 内容区区域。
- 背景区域(背景颜色的区域) = 容器区域(背景图片的默认区域) + 边框区域 ; 或 背景区域(背景颜色的区域) > = 容器区域 注意：以上的第3点和第4点，是我在自己理解的基础上总结定义的，如有错误还请诸位点明指出。
background-color属性
background-color属性是用来为元素设置背景颜色的，其默认值为transparent（透明色）。background-color属性的取值和color属性的取值一致均为颜色取值，如关键词、#十六进制、rgb值、rgba值、hsl值、hsla值。- 背景颜色会覆盖整个背景区域=边框区域+内边距区域+内容区区域;当存在
border时,边框的颜色会覆盖背景图片的颜色，所以可以得出背景颜色的层级要低于边框颜色。
background-image属性
background-image属性是用来为元素设置背景图片的。background-image属性的取值为none(默认值)、url("图片路径")或者gradient渐变，url(图片路径)是用来引入外部图片的。- 当
background-image和background-color同时存在时，背景图片会覆盖背景颜色，背景颜色将作为一种备用选择存在，当background-image属性声明无效时，background-color将会显示。结合border-color，会发现它们的层级关系是这样的:border-color>background-image>background-color gradient渐变，其本质为image类型，所以其可以设置在background-image属性上。background-image属性是以下其他属性的基础，如果background-image无效，那么这些属性设置正确亦不会生效，这些属性包括background-repeat、background-position、background-size、background-attachment、background-origin不包含background-clip属性。
background-repeat属性
- background-repeat是设置背景图片是否铺满整个背景区域。
- 可取值:
- repeat(默认值):背景图片铺满整个背景区域。背景图片重复，保证整个背景图域被填充满，这说明repat值的情况下背景区域下可能有一张或多张背景图。
- no-repeat:背景图片不会铺满整个背景区域，背景区域只有一张背景图，它在背景区域中占据多少就显示多少
- repeat-x：水平方向平铺
- repeat-y：垂直方向平铺 注意：
- 背景图片的大小超过容器大小，依旧可以进行背景图片显示，一旦超过背景区域大小，则会被裁剪。
background-size属性
background-size属性是用来设置背景图片的大小的，图片的默认大小为其本省尺寸大小。- 可取值为length|百分比;(值>0)
- 当只取一个值时，另外一个值会根据宽高比例自动进行设置。
- 当值为百分比时，是相对于容器大小来设置的。容器的大小取决于
background-origin;
background-position属性
background-position属性是用来设置背景图片在背景区域的起始位置，默认值为0 0,表示背景图片的起始点与容器的左上角对齐。- 可取值length|百分比|top、bottom、right、left、center。，可取正值也可取负值。
- top ：背景图片的顶部与容器的顶部对齐。
- bottom:背景图片的底部与容器的底部对齐。
- left:背景图片的左侧与容器的左侧对齐
- right：背景图片的右侧与容器的右侧对齐。
- center：背景图片的中心点与容器的中线点对齐。
- 值为百分比时是相对与(容器大小-图片大小)来设置。
- 当只取一个值时，第二个值默认为center。
background-origin属性
background-origin属性是用来设置容器大小范围的，容器大小范围最多只能和背景区域相同。- 可取值：
- padding-box（默认值） ：padding + width
- border-box ：border + padding + width
- content-box ： width
background-aatechement
background-attachement属性是用来设置背景图片是否随着页面滚动条的改变而改变的- 可取值 scroll、fixed
backgeound-clip
background-clip属性是用来设置背景图片和背景颜色的可延生区域。- 可取值 padding-box、border-box(默认值)、content-box
- 它是对背景区域的粗暴裁剪。
语法注意点
- 在一个background中只能有一个background-color,因为一个元素只能有一个背景颜色，所以如果指定多背景时，将其设置在最后一个url上（必须这样）;它作为background-image的一个备用选择，只有一个url时放在最后一个即可，这里是为了方便理解（推荐）。
- 如果background-size和background-position同时存在时，使用/隔开，前者表示position，后者表示size。
- 如果background-origin和background-clip同时设置，只指定一个值表示两个共用一个，两个值的话第一个值表示origin，第二个值表示clip。
- 如果设置background-origin的话，必须保证background-attachement不为fixed。
- 设置多重背景使用逗号隔开多个url
