① background-color: 默认为transparent 透明；
设置可以用 red/green/blue颜色名称；
可以用#00ff00 #c2c2c2十六进制表示；
可以用rgb(255, 0 , 0)这种rgb形式表示；
inherit，表示从父元素继承background-color;
② background-image: 默认none,不显示图像；有图像的话，默认位于元素的左上角，且在水平和垂直方向重复；
url('URL') 图像路径；
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
③ background-size: 默认auto; 语法： background-size: length | percentage | cover | contain;
四种设置方式：
1）length 即 background-size: 80px 60px; 也就是width 和 height; 如果只设置一个，另一个就是auto;
2) percentage 即以父元素的百分比来设定， background-size: 100% 100%; 第一个是width,第二个是height;
3) cover 即 把背景图像扩展至足够大，以使图像完全覆盖背景区域，但是背景图的某些部分也许无法显示在定位区域中，也就是图像一部分没显示；提示：这种情况，图片不会因为分辨率等不同而变形，但是代价是图片部分会被隐藏掉，显示不全；设置时，最好background-postion: left top,也就是默认值，也可以不设置，这样能保证图片上部显示完全，牺牲下面部分显示；
4）contain 即 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域；
cover 和 contain的区别：
相同点：图片都是等比例缩放的；
不同点：cover是铺满整个显示区域的，如果显示比例和显示区域的比例相差很大，那么图片的一些部分就会不显示；不会造成显示空白的情况；
contain正好相反，它会按照一边来覆盖显示区域，会留有空白的情况；
④ background-position: 设置背景图像的起始位置；默认 0% 0%；
提示：需要将background-attachment属性设置为fixed,才能保证position在Firefox和Oprea中正常使用；
设置： 1）使用left right center top bottom来表示，如 left top, left center, left bottom 等；
2）使用百分比 x% y%， 第一个是水平位置，第二个是垂直位置，左上角是0% 0%，右下角是100% 100%，如果仅设置了一个，另一个值为50%；
3）第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。
⑤ background-attachment: 设置背景图片是否固定，或者随着页面的其余部分滚动而移动；
默认： scroll，随着页面的其余部分滚动而移动；提醒：特别在带有滚动条的元素中，要特别注意；
设置： fixed, 当页面的其余部分滚动时，背景图片不随着移动；
⑥ background-repeat: 设置是否及如何重复背景图像； 默认：repeat 即 在水平和垂直方向上重复；
设置： repeat , repeat-x , repeat-y , no-repeat;
⑦ background-origin 属性规定background-position 属性相对于什么位置来定位； 默认： padding-box;
注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
设置：
border-box 就是把背景图片的坐标原点设置在盒模型border-box区域的左上角
padding-box （默认值）就是把背景图片的坐标原点设置在盒模型padding-box区域的左上角
content-box 就是把背景图片的坐标原点设置在盒模型content-box区域的左上角
⑧ background-clip 规定背景的绘制区域； 默认：border-box;
语法：background-clip: border-box | padding-box | content-box ;