CSS背景圖片大小設(shè)置

在CSS中，我們可以使用background-size屬性來設(shè)置背景圖片的大小，這個屬性接受兩個值，分別是寬度和高度，如果我們只設(shè)置一個值，那么另一個值會自動計算以保持原始圖片的寬高比。

如果我們想要將背景圖片的寬度設(shè)置為100px，那么我們可以這樣寫：

div {
  background-image: url('image.jpg');
  background-size: 100px;
}

這樣，背景圖片的寬度就會被設(shè)置為100px，高度會自動計算以保持原始圖片的寬高比。

如果我們想要將背景圖片的高度設(shè)置為200px，那么我們可以這樣寫：

div {
  background-image: url('image.jpg');
  background-size: auto 200px;
}

這樣，背景圖片的高度就會被設(shè)置為200px，寬度會自動計算以保持原始圖片的寬高比。

如果我們想要將背景圖片等比例縮放，那么我們可以這樣寫：

div {
  background-image: url('image.jpg');
  background-size: cover;
}

這樣，背景圖片就會被等比例縮放，以完全覆蓋元素區(qū)域，注意，這可能會導(dǎo)致圖片的部分區(qū)域在元素區(qū)域內(nèi)不可見。

我們還可以使用background-repeat屬性來控制背景圖片的重復(fù)方式，如果我們想要讓背景圖片在水平和垂直方向上都重復(fù)，那么我們可以這樣寫：

div {
  background-image: url('image.jpg');
  background-repeat: repeat;
}

這樣，背景圖片就會在水平和垂直方向上都重復(fù)，直到填滿整個元素區(qū)域。