background-color:<color>
background-image:<bg-image>[,<bg-iamge>]*
<bg-image> = <image>|none
url("/image/x.png")
background-image:url(red.png),url(blue.png);
background-repeat:<repeat-style>[,<repeat-style>]*
<repeat-style> = repeat-x|repeat_y|[repeat|space|round|no-repeat]{1,2}
background-repeat:no-repeat repeat;对应x、y
background-attachment:<attachment>[,<attachment>]*
<attachment> = scroll(背景不动) | fixed|lacal(内容和背景一起滚动)
background-position:<position>[,<position>]*
background-position:0 0; 对应X轴和Y轴
background-position:10px 20px;
background-position:20% 50%; 图片百分比的位置和容器百分比的位置对应
background-position:50% 50%; 居中
background-position:center center; 居中
background-position:right X轴最右边 另外一个值默认center
background-position:right 10px top 20px;
线性渐变linear-gradient
[[<angle>|to <side-or-corner>],]?<color-stop>[,<color-stop>]+
<side-or-corner> = [left|right|top|bottom]
<color-stop> = <color>[<percentage>|<length>]?
background-image:linear-gradient(red,blue);默认上到下
background-image:linear-gradient(to top,red,blue);下到上
background-image:linear-gradient(to right bottom,red,blue);左上到右下
background-image:linear-gradient(0deg,red,blue);从下往上
background-image:linear-gradient(45deg,red,blue);从左下往右上
background-image:linear-gradient(red,green,blue);从下往上
background-image:linear-gradient(red,green 20%,blue);从下往上
镜像渐变：radial-gradient()
[[circle||<length>][at <position>]?,| 可以设置一个圆形，并且可以设置大小即半径，圆心位置
[ellipse||<length>|<percentage>]{2}][at <position>]?,| 可以设置一个椭圆，并且可以设置大小即半径两个值，圆心位置
[[circle|ellipse]||<extent-keyword>][at <position>]?,|at<position>,]?<color-stop>[,<color-stop>]+
<extent-keyword> = closest-side|farthest-side|closest-corner|farthest-corner
background-image:radial-gradient(closest-side,red,blue);
background-image:radial-gradient(circle,red,blue);
background-image:radial-gradient(circle 100px,red,blue);
background-image:radial-gradient(red,blue);
background-image:radial-gradient(100px 50px at 0 0,red,blue);
repeat-*-gradient
background-origin 决定的是背景图（0,0）（100%，100%）区域
<box>[,<box>]*
<box> = border-box|padding-box（默认值）|content-box
background-clip 裁剪
<box>[,<box>]*
<box> = border-box（默认值）|padding-box|content-box
background-size 大小
<bg-size>[,<bg-size>]*
<bg-size> = [<length>|<percentage>|auto]{1,2}|cover|contain
background
[<bg-layer>,]*<final-bg-layer>
<bg-layer> = <bg-image>||<position>[/<bg-size>]?||<repeat-style>||<attachment>||<box>||<box>
<final-bg-layer> = <bg-layer>||<'background-color'>
background:url(red.png) 0 0/20px 20px no-repeat,url(blue.png) 50% 50%/contain no-repeat content-box green;
在低版本浏览器（如IE6、IE7、IE8等）中不支持，比如：多背景图、渐变背景、background-size、background-origin、background-clip等。
