Chapter 8 背景圖片

縮放背景圖片

background-size: 100px 100px; /* 設(shè)置圖片的尺寸*/
background-size: 100% auto; /* 瀏覽器會自動設(shè)置寬度，以保持不變的長寬比*/
background-size: 100% 100%; /* 圖片將縮放，完全適應(yīng)背景*/
background-size: contain; /* 迫使圖片進(jìn)行尺寸調(diào)整，以保持圖片等長寬比， 圖片會伸展， 以適應(yīng)元素的高度或者寬度*/
background-size: cover; /* 為了適應(yīng)元素， 圖片會進(jìn)行擠壓或者拉伸*/

使用多個(gè)背景圖片

?? 卷軸效果

background-image:  url(scrollTop.jpg),
                   url(scrollBottom.jpg),
                   url(scrollMiddle.jpg);
background-repeat: no-repeat,
                   no-repeat,
                   repeat-y;

background:  url(scrollTop.jpg) center top no-repeat,
             url(scrollBottom.jpg) center bottom no-repeat,
             url(scrollMiddle.jpg) center top repeat-y;

免費(fèi)的圖片

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容