在CSS中設(shè)置背景圖片的大小是一個常見的需求,我們可以使用background-size
屬性來控制背景圖片的大小,這個屬性接受兩個值:寬度和高度,你可以分別指定寬度和高度,或者只指定一個值,另一個值會自動縮放以保持原始圖片的寬高比。
如果你想要將背景圖片設(shè)置為寬度為300像素,高度為200像素,你可以這樣寫:
.div { background-image: url('path/to/image.jpg'); background-size: 300px 200px; }
如果你只指定寬度,高度會自動縮放:
.div { background-image: url('path/to/image.jpg'); background-size: 300px; }
CSS還提供了cover
和contain
兩個關(guān)鍵字,它們可以自動縮放圖片以覆蓋或包含元素區(qū)域:
.div { background-image: url('path/to/image.jpg'); background-size: cover; }
或者:
.div { background-image: url('path/to/image.jpg'); background-size: contain; }
使用cover
關(guān)鍵字,圖片會被縮放以覆蓋整個元素區(qū)域,可能會有部分圖片被裁剪,而使用contain
關(guān)鍵字,圖片會被縮放以完全包含元素區(qū)域,但可能會有空白區(qū)域出現(xiàn)。
版權(quán)聲明:除非特別標注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時請以鏈接形式注明文章出處。