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;對(duì)應(yīng)x辜限、y
background-attachment:<attachment>[,<attachment>]*
<attachment> = scroll(背景不動(dòng)) | fixed|lacal(內(nèi)容和背景一起滾動(dòng))
background-position:<position>[,<position>]*
background-position:0 0; 對(duì)應(yīng)X軸和Y軸
background-position:10px 20px;
background-position:20% 50%; 圖片百分比的位置和容器百分比的位置對(duì)應(yīng)
background-position:50% 50%; 居中
background-position:center center; 居中
background-position:right X軸最右邊 另外一個(gè)值默認(rèn)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);默認(rèn)上到下
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>]?,| 可以設(shè)置一個(gè)圓形然遏,并且可以設(shè)置大小即半徑,圓心位置
[ellipse||<length>|<percentage>]{2}][at <position>]?,| 可以設(shè)置一個(gè)橢圓奈惑,并且可以設(shè)置大小即半徑兩個(gè)值慌申,圓心位置
[[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%)區(qū)域
<box>[,<box>]*
<box> = border-box|padding-box(默認(rèn)值)|content-box
background-clip 裁剪
<box>[,<box>]*
<box> = border-box(默認(rèn)值)|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等餐弱。