在CSS中,我們可以使用background-size
屬性來(lái)定義背景圖片的大小,這個(gè)屬性接受兩個(gè)值,分別是圖片的寬度和高度,你可以將這兩個(gè)值設(shè)置為固定的像素值,或者設(shè)置為百分比,這樣背景圖片就可以根據(jù)容器的大小自動(dòng)縮放。
如果你想要將背景圖片設(shè)置為寬度為200像素,高度為300像素,你可以這樣寫(xiě):
.div { background-image: url('image.jpg'); background-size: 200px 300px; }
如果你想要讓背景圖片根據(jù)容器的大小自動(dòng)縮放,你可以將寬度和高度都設(shè)置為百分比:
.div { background-image: url('image.jpg'); background-size: 100% 100%; }
這樣,無(wú)論容器的大小如何變化,背景圖片都會(huì)自動(dòng)縮放以適應(yīng)容器的大小,注意,如果圖片的原始大小與容器的大小不匹配,那么圖片可能會(huì)被拉伸或壓縮,這可能會(huì)導(dǎo)致圖片失真或變形,在使用百分比來(lái)定義背景圖片大小時(shí),需要謹(jǐn)慎選擇圖片的尺寸和分辨率。