在CSS中,我們可以使用背景圖的大小屬性來(lái)修改背景圖的大小,這個(gè)屬性通常被稱為"background-size",它有兩個(gè)值,一個(gè)是寬度,另一個(gè)是高度,如果我們只提供一個(gè)值,那么另一個(gè)值會(huì)自動(dòng)計(jì)算以保持圖像的長(zhǎng)寬比。
如果我們想把背景圖的大小修改為寬度為200像素,高度為300像素,我們可以這樣寫:
body { background-image: url('image.jpg'); background-size: 200px 300px; }
如果我們只想改變寬度,可以只提供一個(gè)值:
body { background-image: url('image.jpg'); background-size: 200px; }
這樣,高度會(huì)自動(dòng)計(jì)算以保持圖像的長(zhǎng)寬比,需要注意的是,如果圖像原本的長(zhǎng)寬比與指定的寬度和高度不匹配,那么圖像可能會(huì)被拉伸或壓縮,為了避免這種情況,我們可以使用"contain"或"cover"值來(lái)指定圖像的縮放行為:
body { background-image: url('image.jpg'); background-size: 200px 300px; background-repeat: no-repeat; background-position: center; }