在CSS中,我們可以使用background-size
屬性來(lái)改變背景圖片的長(zhǎng)和寬,這個(gè)屬性可以設(shè)置為自動(dòng)(auto
),或者設(shè)置為具體的長(zhǎng)度和寬度。
如果我們想要將背景圖片的長(zhǎng)度設(shè)置為200px,寬度設(shè)置為300px,我們可以這樣寫(xiě):
div { background-image: url('image.jpg'); background-size: 200px 300px; }
這段代碼會(huì)將背景圖片的長(zhǎng)度設(shè)置為200像素,寬度設(shè)置為300像素,如果圖片的原始比例與設(shè)置的比例不符,那么圖片可能會(huì)被拉伸或者壓縮。
我們還可以將background-size
屬性設(shè)置為contain
或者cover
,這樣可以將圖片完全顯示在背景中,而不會(huì)拉伸或者壓縮。
div { background-image: url('image.jpg'); background-size: contain; /* 圖片會(huì)被縮放以適應(yīng)容器,但可能會(huì)被裁剪 */ }
或者:
div { background-image: url('image.jpg'); background-size: cover; /* 圖片會(huì)被縮放并裁剪以適應(yīng)容器 */ }
這些設(shè)置可以幫助我們更好地控制背景圖片的大小和顯示方式。