在CSS中,我們可以使用background-size
屬性來設(shè)置背景圖片的大小,這個(gè)屬性接受兩個(gè)值,分別是圖片的寬度和高度,如果我們只設(shè)置一個(gè)值,那么另一個(gè)值會(huì)自動(dòng)計(jì)算以保持圖片的比例不變。
如果我們想要將背景圖片設(shè)置為寬度為200像素,高度為300像素,我們可以這樣寫:
div { background-image: url('image.jpg'); background-size: 200px 300px; }
如果我們只設(shè)置一個(gè)值,例如只設(shè)置寬度為200像素,那么高度會(huì)自動(dòng)計(jì)算:
div { background-image: url('image.jpg'); background-size: 200px; }
我們還可以使用contain
和cover
關(guān)鍵字來設(shè)置背景圖片的大小。contain
關(guān)鍵字會(huì)保持圖片的比例不變,而cover
關(guān)鍵字則會(huì)將圖片放大到完全覆蓋元素。
如果我們想要保持圖片的比例不變,我們可以這樣寫:
div { background-image: url('image.jpg'); background-size: contain; }
如果我們想要將圖片放大到完全覆蓋元素,我們可以這樣寫:
div { background-image: url('image.jpg'); background-size: cover; }
這些設(shè)置可以幫助我們更好地控制背景圖片的大小和顯示方式。