CSS調(diào)整背景圖片大小的方法
在CSS中,我們可以使用background-size
屬性來調(diào)整背景圖片的大小,這個屬性接受兩個值:寬度和高度,如果我們只提供一個值,那么另一個值會自動計算以保持原始圖片的寬高比。
如果我們想要將背景圖片的寬度調(diào)整為100像素,我們可以這樣寫:
div { background-image: url('image.jpg'); background-size: 100px; }
這樣,背景圖片的寬度就會被調(diào)整為100像素,高度會自動計算以保持原始圖片的寬高比。
如果我們想要將背景圖片的高度調(diào)整為200像素,我們可以這樣寫:
div { background-image: url('image.jpg'); background-size: auto 200px; }
這樣,背景圖片的高度就會被調(diào)整為200像素,寬度會自動計算以保持原始圖片的寬高比。
如果我們想要將背景圖片等比例縮放,我們可以這樣寫:
div { background-image: url('image.jpg'); background-size: cover; }
這樣,背景圖片就會被等比例縮放,以適應(yīng)div的寬度和高度,注意,這可能會導(dǎo)致背景圖片的部分區(qū)域在div中不可見。
我們還可以使用background-repeat
屬性來控制背景圖片的重復(fù)方式,如果我們想要讓背景圖片在div中橫向重復(fù),我們可以這樣寫:
div { background-image: url('image.jpg'); background-repeat: repeat-x; }
這樣,背景圖片就會在div中橫向重復(fù)顯示。