background-size:contain(縮放在背景內(nèi)部)/cover(覆蓋全背景)/長度單位
background-color:背景顏色;
background-image:url();
background-position:0 0;
background-repeat:no-repeat/repeat-x/repeat-y(背景Y軸重復(fù))
background-attachment:scorll/fixed(背景固定在視口);
background-clip:content-box/padding-box/border-box(確定從什么盒子裁剪背景);
background-origin:content-box/padding-box/border-box(確定從什么盒子顯示背景);
1睛藻、background-size
contain cover
contain：圖片大到剛好被包裹，不更改圖片比例，可能留有空白區(qū)域
cover：圖片被拉伸到剛好覆蓋整個背景區(qū)域，為了適應(yīng)元素的寬高會更改圖片比例
1.1、object-fit屬性 指定替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框
比如當(dāng)替換元素img設(shè)置了寬高
object-fit:cover; //不改變替換內(nèi)容的寬高比進行縮放母债，并填充滿整個內(nèi)容框，不會留空
object-fit:contain; //不改變替換內(nèi)容寬高比進行縮放尝抖，按最寬或最高匹配內(nèi)容框毡们，若圖片小于內(nèi)容框，內(nèi)容框會存在空白
object-fit:fill; //填充滿整個內(nèi)容框昧辽，寬高比不匹配時會被拉伸
object-fit:none; //被替換的內(nèi)容尺寸不會被改變
object-fit:scale-down; //內(nèi)容尺寸像是指定了none或contain衙熔，取最小的那個對象尺寸
object-fit:cover / contain
2、background-clip 和 background-origin 的區(qū)別
共同擁有的值：content-box / padding-box / border-box
此時為content-box
background-clip：默認值
border-box搅荞，根據(jù)值進行背景顏色或圖片的裁剪红氯。如上圖所示，為content-box時外部區(qū)域沒有背景顏色或圖片background-origin：默認值
padding-box咕痛，規(guī)定背景圖片的顯示區(qū)域從哪個原點開始痢甘，對顏色無效
2.1、獨有值 - background-clip:text : 裁剪到只有文字區(qū)域才能顯示背景圖片
注意：
- 目前只有谷歌瀏覽器支持該屬性
-
需要文字顏色為透明才能看到背景圖片茉贡，若文字有顏色則會覆蓋掉背景圖片
background-clip:text
3塞栅、background-image
background-image:url(),url(),url(); /*z軸方向疊加*/
CSS漸變
線性漸變
background-image:linear-gradient(top right,red,blue)
background-image:linear-gradient(45deg,red,blue,black)
background-image:linear-gradient(90deg,red 50%,blue 75%,black 90%)
平鋪的線性漸變
background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 30px, #66CC99 40px);
//瀏覽器從左下角開始繪制漸變，前20像素是綠色腔丧，此后直至30像素的位置過渡到紫色放椰，然后直至40像素的位置再過渡到綠色
background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 20px, #6666CC 30px, #66CC99 30px, #66CC99 40px);
//這樣設(shè)置色標(biāo)的位置作烟，可以控制不同顏色在過渡中的強度。使得各個顏色過渡之間的邊界變得清晰砾医，形成條紋效果拿撩。
徑向漸變：沿著圓周或者橢圓周向外擴散
background-image: radial-gradient(#99CCCC, #7171B7); //橢圓
background-image: radial-gradient(circle,#99CCCC, #7171B7); //circle，定義圓形漸變
background-image: radial-gradient(circle at 20% 20%, #99CCCC, #7171B7); //定義圓心位置
closest-side：告訴瀏覽器從中心點向外擴展?jié)u變藻烤，到離中心點最近的一邊結(jié)束绷雏。
closest-corner：以離漸變中心點最近的元素頂角計算漸變的范圍。
farthest-side：以離漸變中心點最遠的那一邊計算圓的半徑怖亭。
farthest-corner：以離漸變中心點最遠的頂角計算圓的半徑。
