1、background-origin 規定 background-position 屬性相對於什麼位置來定位
a、padding-box 背景圖像相對於內邊距框來定位
b、border-box 背景圖像相對於邊框盒來定位
c、content-box 背景圖像相對於內容框來定位
2、background-clip 規定背景的繪製區域,也就是背景圖片顯示的區域
a、border-box 背景被裁剪到邊框盒
b、padding-box 背景被裁剪到內邊距框
c、content-box 背景被裁剪到內容框
3、background-size 規定背景圖像的尺寸
a、length 設置背景圖像的寬度和高度(第一個值爲寬度,第二個值爲高度)
b、percentage 以父元素的百分比來設置背景圖像的寬度和高度(第一個值爲寬度,第二個值爲高度)
c、cover 按比例調整背景圖片,背景圖片會自適應鋪滿整個背景區域。如果圖片大於背景區域,會有部分顯示不出來,而如果背景區域大於圖片,則會留有空白。(圖片會按比例縮小或放大適應背景區域的寬高,只要有一個滿足則不在縮放)
d、contain 按比例調整背景圖片,背景圖片會自適應鋪滿整個背景區域,圖片寬高會按比例縮放適應背景區域,以保證圖片完全顯示在背景區域內,這樣背景區域一般會有空白,與cover相反。
我們在前端開發中背景圖片常常使用一張大圖,然後設置背景圖片的尺寸爲cover,然後這個背景圖片的位置居中,background-position: center,這樣圖片雖然有一部分顯示不出來,但是主要的內容卻顯示出來了。