CSS中設(shè)置背景圖片大小的方法

在CSS中，我們可以使用background-size屬性來(lái)設(shè)置背景圖片的大小，這個(gè)屬性可以指定背景圖片的寬度和高度，或者只指定一個(gè)值，另一個(gè)值會(huì)自動(dòng)縮放以保持原始圖片的寬高比。

如果我們想要將背景圖片設(shè)置為寬度為200像素，高度為300像素，可以使用以下CSS代碼：

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

如果我們只指定一個(gè)值，例如寬度為200像素，高度會(huì)自動(dòng)縮放：

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

我們還可以使用contain或cover關(guān)鍵字來(lái)設(shè)置背景圖片的大小。contain關(guān)鍵字會(huì)保持圖片的原始寬高比，并縮放圖片以適應(yīng)容器的大?。欢?code>cover關(guān)鍵字則會(huì)將圖片放大或縮小到完全覆蓋容器的大小。

使用contain關(guān)鍵字：

body {
  background-image: url('image.jpg');
  background-size: contain;
}

使用cover關(guān)鍵字：

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

需要注意的是，如果圖片本身的大小與指定的容器大小不匹配，那么圖片可能會(huì)被裁剪或填充空白以保持指定的尺寸，在設(shè)置背景圖片大小時(shí)，需要確保圖片本身的大小與容器的尺寸相匹配。