背景尺寸屬性
background-size:length|percentage|cover|contain;
length?設(shè)置背景圖像的高度和寬度坎拐。第一個值設(shè)置寬度烦磁,第二個值設(shè)置高度养匈。如果只設(shè)置一個值哼勇,
? ? ? ? ? ?則第二個值會被設(shè)置為 "auto"都伪。
percentage?以父元素的百分比來設(shè)置背景圖像的寬度和高度土砂。第一個值設(shè)置寬度姑丑,第二個值設(shè)置高
? ? ? ? ? ? ? ? ? ?度。如果只設(shè)置一個值蚜点,則第二個值會被設(shè)置為 "auto"帝璧。
cover 把背景圖像擴(kuò)展至足夠大先誉,以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示?在背景定位區(qū)域中的烁。
contain 把圖像圖像擴(kuò)展至最大尺寸褐耳,以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域
背景圖片定位區(qū)域?qū)傩?/h1>
background-origin: padding-box|border-box|content-box;
padding-box?背景圖像相對于內(nèi)邊距框來定位。
border-box?背景圖像相對于邊框盒來定位渴庆。
content-box?背景圖像相對于內(nèi)容框來定位铃芦。
背景圖片繪制區(qū)域?qū)傩?/h1>
background-clip: border-box|padding-box|content-box;
border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內(nèi)邊距框襟雷。
content-box 背景被裁剪到內(nèi)容框刃滓。
多重背景圖片
/*先添加的圖片顯示在上面,多個背景圖片用逗號隔開耸弄,代碼如下*/
background-image:url("img/one-piece/offer/run.png"),url(img/one-piece/offer/hzwbg.jpg);
background-size:30% auto,cover;
background-repeat:no-repeat,no-repeat;
background-position:100% 7000%,0 0;