background樣式

1.background-size

（1）能夠指定數值，圖片可能會失真

background-size：100px 100px ;  

（2）能夠指定百分比

background-size：100% 100% ;  

（3）指定contain,包含 ，等比例縮放，圖片是完整的，可能會留白

background-size：contain ;  

（4）指定cover,覆蓋，等比例縮放，可能圖片不完整

background-size：cover ;  

2.background-position

background-position:center center;

3.background-clip 背景裁切，能夠設置背景的顯示範圍

（1）background-clip:border-box;(默認值) 顯示範圍：border+padding+content

（2）background-clip:padding-box;顯示範圍：padding+content

（3）background-clip:content-box;顯示範圍：content

4.background-origin 背景顯示的原點

（1）background-originp:border-box;

（2）background-origin:padding-box;(默認值) 

（3）background-origin:content-box;

5.background-image，背景圖片

（1）background-image:url('./image/圖片.png')

（2）background-image:linear-gradient(方向，顏色 範圍，顏色 範圍……)  

方向：to right , to left,to top,to bottom,角度deg

範圍：支持數值和百分比 ,

background-image:linear-gradient(to right，red 30%,yellow 50%,blue 70%)  

（3）background-image:radial-gradient(半徑 at 圓心位置，顏色 範圍，顏色 範圍……)  

圓的大小，半徑，

圓心的位置，right left top botton center,

background-image:radial-gradient(100px at center center，red 30%,yellow 50%,blue 70%)  

6.background-color: #fff;

7.background-repeat   背景平鋪

（1）background-repeat :repeat -x;

（2）background-repeat :repeat -y;

（3）background-repeat :no-repeat ;