background属性介绍

background属性在CSS中有较多的应用，主要用来设置背景颜色、图片。background属性可以分开写，也可以合并，建议合并减少代码量。

1. background-color：设置背景颜色；
设置的背景颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。颜色可以直接是颜色名称（red）、十六进制（#fff）、rgb（rbg（178,211,152）），inherit会继承父级的背景颜色。

2. background-image：设置背景图片；

背景图片占据元素的全部尺寸，包括内边距和边框，但不包括外边距。图片默认在盒子的左上角，若图片盒子尺寸大于图片尺寸，图片会在水平和垂直方向平铺。

值	描述
url（‘’）	指向图像路径
none	默认值，不显示背景图像
inherit	从父级继承background-image设置的属性

3. background-repeat：设置背景图片否平铺
设置是否平铺图像，默认在水平和垂直方向平铺。

值	描述
repeat	默认图片在水平和垂直方向平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺
no-repeat	不平铺，只显示一次
inherit	继承父级元素设置的background-repeat属性

4. background-position：这只背景图片位置
设置图片水平位置：left、center、right
设置图片垂直位置：top、center、bottom
水平和垂直属性两两结合可以设置图片的位置在四个角、四个边的中心、盒子的正中心位置。还可以设置具体的像素值把背景图片精确的定位到盒子的某个位置，还可以用百分比设置图片的位置。

值	描述
left、right 、top、center、bottom	如果只设置了一个关键词，那么第二词默认是center
x%、y%	第一个是水平位置，第二个是垂直位置。左上角是0%0%，右下角是100%100%。如果只设置了一个值，另一个默认50%。
xpox、ypos	第一个是水平位置，第二个是垂直位置。左上角是00，单位可以是px或其他CSS单位。若只规定了一个值，另一个值默认50%。%和position可以混合使用。

5. background-size：设置背景图片大小

6. background-attachment：设置背景图片是固定还是随着页面滚动条滚动

值	描述
scroll	默认值，图片会随着页面其余部分的滚动而移动
fixed	当页面的其余部分滚动时，背景图不会移动
inherit	继承父级元素设置的background-attachedt属性

7. background-origin
规定background-position属性相对于什么位置来定位。
ps：如果背景图设置background-attachment属性为“fixed”，则该属性没有效果。

值	描述
padding-box	背景图相对于内编辑框定位
boder-box	背景图相对于边框盒定位
content-box	背景图相对于内容框定位

属性合并设置不仅仅性能更好，而且兼容性好，减少了代码冗余。设置如下：
background：#fff url（‘1.jpg’） no-repeat left center fixed