一、定義背景起點

background-origin:border-box/padding-box（默認）/content-box;

border-box：起點設置為border左上角

padding-box：起點設置為padding左上角

content-box：起點設置為content左上角

例如：注意黑點

二、定義背景顯示區域

background-clip:border-box（默認）/padding-box/content-box;

例如：注意邊框

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

三、縮放背景圖

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

例如：

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

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

background-size: contain;根據元素背景尺寸強制修改圖像尺寸，不修改圖像縱橫比

background-size: cover;強制讓圖片的width或height適應元素，不修改圖像縱橫比

四、使用多個背景圖（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 關鍵字,顏色值 位置值,顏色值 位置值,.....)

關鍵字：top/right/bottom/left。

        deg（角度按順時針旋轉）:0deg相當于to top，90deg相當于to right，180deg相當于to bottom，270deg相當于to left。

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

例如：

background-color:#FC0;

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

說明：

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

to right：漸變從左向右

#900 20%：顏色值（#900）在位置值（0~20%）——瀏覽器默認從0開始，故無需設置0%

#900 20%,#FC0 30%：位置20%到30%，從#900過渡到#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位置值 位置值..., 顏色值,顏色值,...);

說明：

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

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

farthest-side：從位置值呈圓形擴散至元素最遠邊。

farthest-corner：從位置值呈圓形擴散至元素最遠頂角。

ellipse（默認，可不設置）:根據元素形狀向外擴散，元素正方形則為圓形，長方形則為橢圓。

circle：根據元素形狀呈圓形向外擴散。

位置值：從位置值開始漸變，不設置時從元素中心開始漸變。

例如：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、徑向漸變——純色平鋪（參考線性）