1.background-origin 背景的起始位置
background-origin: border-box || padding-box || content-box;
案例初始化：
代碼：
效果： 設置的盒子存在 border padding content（用戶設置的width height）
（1） background-origin: border-box; 設置背景圖片的起始位置從border開始
效果：
（2）background-origin: content-box; 設置背景圖片的位置從用戶設置的內容區開始放置
效果：
（3）background-origin: padding-box（默認值）; 設置背景圖片的位置從padding（內邊距）開始放置
效果：
2.background-clip 背景裁剪
background-clip: border-box | padding-box | content-box | no-clip
案例初始化：
代碼：
效果：背景圖片默認不裁剪 案例設置了背景圖片的起始位置 為boder部分開始 背景顏色為綠色 背景圖片
（1） background-clip: padding-box; 保留padding + content 部分的背景圖片將padding以外的背景圖片裁剪掉
效果：
（2）background-clip: content-box; 保留content 部分的背景圖片將content以外的背景圖片裁剪掉。
效果：
（3）background-clip: border-box; 保留border以內的背景圖片將border以外的背景圖片裁剪掉。
效果：
（4）background-clip: no-clip（默認值）; 不裁剪背景圖片。
效果：
注意： border-box和no-clip 的效果相同 但是含義不同
3. background-size 背景圖片大小
屬性： background-size： cover || contain || 百分比 || 像素值
不寫background-size屬性的案例：
代碼：
效果：
（1）. 添加background-size:cover的效果
cover： 覆蓋 圖片會按照指定比例放大或縮小的填充， 放大縮小的比例取決於圖片的寬 ： 放置的盒子的內容區的寬 和 圖片的高 ： 放置在盒子的內容區的高 的大小的取較大的一個。
（2）. background-size: contain
contain: 包含 ， 圖片會按照指定比例擴大或縮小的填充，放大縮小的比例取決於 圖片的寬 ： 放置的盒子的內容區的寬 和 圖片的高 ： 放置在盒子的內容區的高 的大小的 取較小的一個。
（3）. background-size: 一個具體像素值/百分比 （以100px為例）
一個具體像素值（若是百分比則表示相對於可顯示區的大小） 代表的是圖片的寬度擴大或縮放到該像素值， 而圖片的寬高比是不變的
（4）. background-size: 兩個具體像素值 /百分比 （以100px 100px為例）
兩個具體像素值（若是百分比則表示相對於可顯示區的大小） 代表的是圖片的寬度和高度分別縮放或擴大到指定像素值， 圖片的寬高比取決於設置的像素比
歡迎加入web前端沖擊頂級高薪大廠學習群，群聊號碼：820269529