背景

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等。