一、定義背景起點(diǎn)

background-origin:border-box/padding-box（默認(rèn)）/content-box;

border-box：起點(diǎn)設(shè)置為border左上角

padding-box：起點(diǎn)設(shè)置為padding左上角

content-box：起點(diǎn)設(shè)置為content左上角

例如：注意黑點(diǎn)

二、定義背景顯示區(qū)域

background-clip:border-box（默認(rèn)）/padding-box/content-box;

例如：注意邊框

由于background-origin:padding-box（默認(rèn)），所以background-clip:border-box效果類似background-origin:padding-box

三、縮放背景圖

background-size:px/%/contain/cover;

例如：

background-size: 100% auto;可以隨瀏覽器大小，改變背景圖的尺寸

background-size: 100% 100%;使圖像布滿，修改圖像縱橫比

background-size: contain;根據(jù)元素背景尺寸強(qiáng)制修改圖像尺寸，不修改圖像縱橫比

background-size: cover;強(qiáng)制讓圖片的width或height適應(yīng)元素，不修改圖像縱橫比

四、使用多個(gè)背景圖（IE8不支持）

background:url(top.jpg) center top no-repeat,

                       url(middle.jpg) center top repeat-y,

                       url(bottom.jpg) center bottom no-repeat;

五、使用漸變背景

1、線性漸變

linear-gradient(deg/to 關(guān)鍵字,顏色值 位置值,顏色值 位置值,.....)

關(guān)鍵字：top/right/bottom/left。

        deg（角度按順時(shí)針旋轉(zhuǎn)）:0deg相當(dāng)于to top，90deg相當(dāng)于to right，180deg相當(dāng)于to bottom，270deg相當(dāng)于to left。

位置值：表示顏色值到此位置值為止。

例如：

background-color:#FC0;

background-image:linear-gradient(to right,#900 20%,#FC0 30%,#FC0 70%,#900 80%);

說(shuō)明：

background-color:#FC0：由于IE9及之前版本不支持漸變，故采用此后備方案

to right：漸變從左向右

#900 20%：顏色值（#900）在位置值（0~20%）——瀏覽器默認(rèn)從0開(kāi)始，故無(wú)需設(shè)置0%

#900 20%,#FC0 30%：位置20%到30%，從#900過(guò)渡到#FC0

#FC0 30%,#FC0 70%：位置30%到70%，顏色值#FC0

2、線性漸變——純色平鋪

background-image:

repeating-linear-gradient(45deg,#900 0,#900 10px,#FC0 10px,#FC0 20px);

3、徑向漸變

background-image:

radial-gradient(closest-side/closest-corner/farthest-side/farthest-corner ellipse/circle at位置值 位置值..., 顏色值,顏色值,...);

說(shuō)明：

closest-side：從位置值呈圓形擴(kuò)散至元素最近邊。

closest-corner：從位置值呈圓形擴(kuò)散至元素最近頂角。

farthest-side：從位置值呈圓形擴(kuò)散至元素最遠(yuǎn)邊。

farthest-corner：從位置值呈圓形擴(kuò)散至元素最遠(yuǎn)頂角。

ellipse（默認(rèn)，可不設(shè)置）:根據(jù)元素形狀向外擴(kuò)散，元素正方形則為圓形，長(zhǎng)方形則為橢圓。

circle：根據(jù)元素形狀呈圓形向外擴(kuò)散。

位置值：從位置值開(kāi)始漸變，不設(shè)置時(shí)從元素中心開(kāi)始漸變。

例如：background-image: radial-gradient(red,blue);

background-image: radial-gradient(circle,red,blue);

background-image: radial-gradient(circle at 20% 40%,red,blue);

background-image: radial-gradient(closest-side circle at 20% 40%,red,blue);

background-image: radial-gradient(closest-corner circle at 20% 40%,red,blue);

background-image: radial-gradient(farthest-side circle at 20% 40%,red,blue);

background-image: radial-gradient(farthest-corner circle at 20% 40%,red,blue);

3、徑向漸變——純色平鋪（參考線性）