背景

background-size: X Y;改變背景圖片的大小

具體的值px 
百分比  相對於元素框  
cover 保持寬高比不變，等比例放大縮小，圖片四條邊軸都鋪滿盒子  
contain  同上，上面的區別是水平或者垂直方向其中一個佔滿盒子就停下來

多背景

background-image:url('1.jpg'),url('2.jpg');

 每個圖片引入都要加url 並且用逗號隔開，先執行前面的樣式！如果要實現背景圖片和背景顏色共存，要把背景顏色屬性寫在最後一個圖片的url的後面！不能再單樣式寫法裡面直接寫no­repeat

background-origin背景圖片的起始位置

div{
    background-origin:padding-box; /*預設 從padding內容開始顯示*/
    background-origin:content-box; /*從內容區域開始,感覺是給背景圖片設定paddin
    g;*/
    background-origin:border-box; /*從border區域開始*/
}

background-clip 背景顯示位置 裁剪

規定背景圖片在什麼範圍可見，規定之外的地方就會被裁剪掉，和 background-origin 的區別是從哪裡開始 和 從哪裡裁剪。

div{
    background-clip:border-box; /*border區域外全部剪掉*/
    background-clip:content-box; /*內部區域以外全部剪掉*/
    background-clip:padding-box; /*padding區域外全部剪掉*/
}

 -webkit-background-clip:text;把除文字以外的區域全部剪掉，可以做成藝術字。

複合屬性

這裡要注意的的是，background­size前面加一個反斜槓 放在那裡都可以，但是為了方便閱讀，可讀性更高，順序不要打亂。

/*背景圖片 背景重複 背景位置/背景大小 背景起始 背景裁剪 背景關聯 背景顏色*/
div{
    background:url('') no-repeat center/cover padding-box border-box fixed #666;
}
 

新增顏色

新增hsl() 和 hsla() 顏色

hsl將顏色值以360度的方式變成一個圓形

H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 – 360， 
S：Saturation(飽和度)。取值為：0.0% ­ 100.0%， 
L：Lightness(亮度)。取值為：0.0% ­ 100.0%。

/*用hsl寫一個紅色*/
background:hsl(360,100%,50%);

線性漸變

CSS linear­gradiend() 函式用於建立一個表示兩種或多種顏色線性漸變的圖片。其結果屬於 <gradient> 資料型別，是一種特別的 <image> 資料型別。
<gradient>  是一種 <image> CSS資料型別的子型別，用於表現兩種或多種顏色的過渡轉變。 
<gradient>  沒有內在尺寸；即，不具備固有或首選的尺寸，也不具備首選的比率。其實際的大小取決於其填充元素的大小。

/* 漸變軸為45度，從藍色漸變到紅色 */
linear-gradient(45deg, blue, red);
/* 從右下到左上、從藍色漸變到紅色 */
linear-gradient(to left top, blue, red);
/* 從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最後以紅色結束 */
linear-gradient(0deg, blue, green 40%, red);

 注意：如果你只有兩種顏色！第二個值即使規定了大小！也是佔滿後面的全部內容！

repeating-linear-gradient 重複線性漸變

建立一個由重複線性漸變組成的 <image> ， 這是一個類似 linear­gradient 的函式，並且採用相同的引數，但是它會在所有方向上重複漸變以覆蓋其整個容器. 這個函式的結果是一個<gradient>  資料型別的物件, 這是一個特殊的 <image> 型別。

background: repeating-linear-gradient(45deg,red 0px ,red 20px,blue 20px,blue 40px);

radial-gradient 徑向漸變

由從原點放射兩種或多種顏色之間的漸進轉換的影象。其形狀可以是圓形或橢圓形。

radial-gradient(circle at center, red 0, blue, green 100%);

/*形狀 大小 位置 顏色 顏色
*/
radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-
stop>]+)

屬性詳細講解：

<position> ：主要用來定義徑向漸變的圓心位置。此值類似於CSS中background­position屬性，用於確定元素漸變的中心位置。如果這個引數省略了，其預設值為“center”X 和 Y 方向
<shape> ：主要用來定義徑向漸變的形狀。其主要包括兩個值“circle”和“ellipse”
<size> ：主要用來確定徑向漸變的結束形狀大小。如果省略了，其預設值為“farthest­corner”。可以給其顯式的設定一些關鍵詞，
closest-side： 指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角； 
farthest-side： 指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊； 
farthest-corner: 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角；

重複的鏡徑向漸變

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

倒影 ­webkit­box­reflect 

可以在元素的一個特定方向有倒影！ 
此屬性是谷歌瀏覽器私有屬性！不建議在開發專案中大規模使用！

img{
    display:block;
    -webkit-box-reflect:below 10px linear-gradient(left，red，blue);
    -webkit-box-reflect:below 0 url('images/hello.png');
}

direction  （倒影物件的位置） = above上 below下 left左 right右  
offset （定義倒影和物件之間的間隔,可以為負值）  
mask­box­images  遮罩影象url（）

masks 遮罩

定義：允許通過部分或者完全隱藏一個元素的可見區域。這種效果可以通過遮罩或者裁切特定區域的圖片。

div{
    /*遮罩影象*/
    -webkit-mask-image:url('');
    /*遮罩平鋪*/
    -webkit-mask-repeat:no-repeat;
    /*遮罩位置*/
    -webkit-mask-position:關鍵詞 px 百分比;
    /*遮罩大小*/
    -webkit-mask-size:px 百分比;
}

複合寫法：(和background相同)

mask: url(“”) 50px 30px/10px 10px repeat­x ;