background-color

background-color:#ff0000
紅色
background-color:rgb(255,0,0)
紅色
background-color:rgba(255,0,0,0.5)
紅色半透明
background-color:transparent
默認(rèn)顏色笨鸡，全透明

background-image

<bg-image>[,<bg-image>]*
可以有多種
<bg-image>=<image>|none
通過url()珊佣，引入背景圖片
url("http://163.com/images/x.png")絕對(duì)地址
url("/images/x.png")相對(duì)與跟路徑
url("…/images/x.png")相對(duì)與css文件所在路徑,除了雙引號(hào)可以用單引號(hào)宏多，引號(hào)也可以不寫
background-imge:url(red.png);
單個(gè)菱形圖片蹬敲，平鋪
background-imge:url(red.png),url(blue.png);
background-color:green;

屏幕快照 2016-03-05 上午10.39.33.png

先寫的顏色在最上面，可有多張背景圖片。

background-repeat

<repeat-style>[,<repeat-style>]*
多個(gè)屬性祷蝌，對(duì)應(yīng)的前面引入的圖片
<repeat-style>=repeat-x|repeat-y|
只沿x軸平鋪，只沿y軸平鋪
[repeat|space|round|no-repeat]{1,2}
repeat既沿x軸平鋪也沿y軸平鋪帆卓。space在平鋪的同時(shí)巨朦，每張圖片之間會(huì)留出空隙來。round在平鋪的同時(shí)剑令，圖片會(huì)進(jìn)行伸縮糊啡。no-repeat不平鋪只出現(xiàn)一次。

• background-image:url(red,png);
  background-repeat:repeat-x;

屏幕快照 2016-03-05 上午10.59.08.png

• background-image:url(red,png);
  background-repeat:repeat-y;

屏幕快照 2016-03-05 上午10.59.24.png

• background-image:url(red,png);
  background-repeat:space;

屏幕快照 2016-03-05 上午10.59.36.png

正好可以容下尚洽，不會(huì)出現(xiàn)菱形被截掉

• background-image:url(red,png);
  background-repeat:round;
  不留空隙且悔橄，沒有菱形被截掉，不一定是等比縮放的腺毫，可能被壓扁或者拉長(zhǎng)癣疟。

• background-image:url(red,png);
  background-repeat:no-repeat;
  不平鋪

• background-image:url(red,png);
  background-repeat:no-repeat repeat;
  表示的時(shí)兩個(gè)軸的平鋪形式，第一個(gè)值表示x軸不平鋪潮酒，第二個(gè)值表示y軸平鋪

• background-image:url(red,png),url(blue.png);
  background-repeat:no-repeat repeat;
  藍(lán)色圖片與紅色圖片平鋪方式相同睛挚。

• background-image:url(red,png),url(blue.png);
  background-repeat:no-repeat repeat,repeat-x;
  紅色圖片y軸平鋪，藍(lán)色圖片x軸平鋪

background-attachment

<attachment>[,<attachment>]*
<attachment>=scroll|fixed|local
滾動(dòng)急黎，

• background-image:url(red,png);
  background-attachment:scroll;
  背景圖片不動(dòng)只有內(nèi)容滾動(dòng)

• background-image:url(red,png);
  background-attachment:local;
  內(nèi)容跟背景跟著滾動(dòng)條一起動(dòng)

background-position

<position>[,<position>]*

<position>=[left|center|right|top|bottom|<percentage>|<length>]|
[left|center|right|<percentage>|<length>] [top|center|bottom|<percentage>|<length>]|
[center|[left|right] [<percentage>|<length>]?]&&[center|[top|bottom] [<percentage>|<length>]?]

以"|"分三段
第一段可以寫一個(gè)值扎狱，這個(gè)值是關(guān)鍵詞或是某一個(gè)具體的詞
第二段用空格空開可以寫兩個(gè)值侧到，第一個(gè)值x軸的位置，第二個(gè)值y軸的位置淤击。
第三段可以寫關(guān)鍵詞加上百分比匠抗，x軸y軸并且都可以寫兩個(gè)

• background-image:url(red.png);
  background-repeat:no-repeat;
  background-position:0 0;
  引入一張圖片，默認(rèn)值為0 0

• background-image:url(red.png);
  background-repeat:no-repeat;
  background-position:10px 20px;
  x軸向右偏移10px污抬，y軸向下偏移20px

• background-image:url(red.png);
  background-repeat:no-repeat;
  background-position:20% 50%;
  圖片的百分比的位置和容器的百分比的位置對(duì)應(yīng)汞贸，既整個(gè)容器的百分?jǐn)?shù)

• background-image:url(red.png);
  background-repeat:no-repeat;
  background-position:50% 50%;
  居中效果

• background-image:url(red.png);
  background-repeat:no-repeat;
  background-position:center center;
  居中效果
  同理，
  left:x軸上的0%
  right:x軸上的100%
  top:y軸上的0%
  bottom:y軸上的100%

• background-image:url(red.png);
  background-repeat:no-repeat;
  background-position:right;
  當(dāng)只有right一個(gè)值時(shí)印机，表示水平在最右邊矢腻，垂直居中。默認(rèn)值居中

• background-image:url(red.png);
  background-repeat:no-repeat;
  background-position:right 10px top 20px;
  距離右邊10px射赛，距離上邊20px多柑。其中right與top為參照物

linear-gradient()

按鈕的漸變背景
[[<angle>|to<side-or-corner>],]?<color-stop>[,<color-stop>]+
是一個(gè)角度或者時(shí)一些線性的方向，到一個(gè)邊或一個(gè)角楣责。然后寫一些顏色的斷點(diǎn)
<side-or-corner>=[left|right]||[top|bottom]

<color-stop>=<color>[<percentage>|<length>]?
一個(gè)color值加上它所停在的位置

• background-image:linear-gradient(red,blue);
  只寫兩個(gè)顏色竣灌，從紅色漸變到了藍(lán)色，默認(rèn)值從top到bottom

• background-image:linear-gradient(to top,red,blue);
  從紅色漸變到了藍(lán)色,從下往上

• background-image:linear-gradient(to right bottom,red,blue);
  從紅色漸變到了藍(lán)色,從左上角到右下角

• background-image:linear-gradient(0deg,red,blue);
  0度腐魂，從下往上的漸變

• background-image:linear-gradient(45deg,red,blue);
  45度帐偎，沿45度直線由紅到藍(lán)漸變

• background-image:linear-gradient(red,green,blue);
  紅色逐纬，綠色蛔屹，藍(lán)色漸變。位置缺少時(shí)會(huì)自動(dòng)平分

• background-image:linear-gradient(red,green 20%,blue);
  紅綠藍(lán)豁生，綠色在從上到下20%的位置開始漸變

radial-gradient()

徑向漸變兔毒，圓或橢圓沿半徑往外散發(fā)

[[circle||<length>] [at<position>]?,|
[ellipse||[<length>|<percentage>]{1,2}] [at <position>]?,|
[[circle|ellipse]||<extent-keyword>][at<position>]?,|at<position>,
]?<color-stop>[,<color-stop>]+

第一段，圓甸箱，半徑長(zhǎng)度育叁，圓心位置
第二段，橢圓芍殖，兩個(gè)半徑長(zhǎng)度或百分比豪嗽，圓心位置
第三段，圓形或橢圓形+關(guān)鍵字+圓心位置
關(guān)鍵字
<extent-keyword>=closest-side|farthest-side|closet-corner|farthest-corner
離圓心最近的邊豌骏，離圓心最遠(yuǎn)的邊龟梦，離圓心最近的角，離圓心最遠(yuǎn)的角

• 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,red,blue);

• background-image:radial-gradient(100px 50px at 0 0,red,blue);

• background-image:radial-gradient(red,green20%,blue);

repeat-*-gradient

漸變的重復(fù)窃躲，循環(huán)重復(fù)

• background-image:repeating-linear-gradient(red,blue 20px,red 40px);

• background-image:repeating-radial-gradient(red,blue 20px,red 40px);

例：添加一個(gè)背景菱形
background-image:url(red.png);
background-repeat:no-repeat;
background-image:right bottom;
它在padding－box的右下角出現(xiàn)计贰，沒有在content-box的右下角

background-origin

設(shè)定背景圖片0 0坐標(biāo)與百分百坐標(biāo)的區(qū)域，希望它顯示在哪個(gè)區(qū)域
默認(rèn)值為padding-box
<box>[,<box>]*
<box>=border-box|padding-box|content-box

• background-image:url(red.png);
  background-image:no-repeat;
  background-origin:content-box;

background-clip

裁剪
<box>[,<box>]*
<box>=border-box|padding-box|content-box
默認(rèn)值為border-box在其外面進(jìn)行裁剪

• background-image:url(red.png);
  background-clip:content-box;
  background-origin:content-box;

0 0點(diǎn)在content-box,裁剪區(qū)域也在content-box以外

background-size

<bg-size>[,<bg-size>]*
<bg-size>=[<length>|<percentage>|auto]{1,2}|cover|contain
可以寫兩個(gè)值蒂窒，寬度與高度躁倒，一個(gè)值時(shí)荞怒，剩下的值默認(rèn)為auto
或?qū)戧P(guān)鍵字cover和contain

• background-image:url(red.png);
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:auto;
  寬高為默認(rèn)自動(dòng)
  background-size:50% 50%;
  或?yàn)檎麄€(gè)寬高的一半
  background-size:cover;
  讓圖片撐滿整個(gè)容器
  background-size:contain;
  圖片盡可能的大，寬高都不能超過容器秧秉。

background

[<bg-layer>,]*<final-bg-layer>
背景圖片層可多個(gè)褐桌，背景顏色層
<bg-layer>=<bg-image>||<position>[/<bg-size>]?||<repeat-style>||<attachment>||<box>||<box>
注意：<bg-size>前要加“／”以區(qū)分position與bg-size

<final-bg-layer>=<bg-layer>||<'background-color'>
背景顏色出現(xiàn)在所有背景圖片層之后，例如兩個(gè)背景圖片則在第二個(gè)背景圖片層后加背景顏色象迎。
例;
background:
url(red.png) 0 0/20px 20px no-repeat
,url(blue.png) 50% 50%/contain no-repeat content-box green;