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

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

如果我們想要將背景圖片設(shè)置為寬度為200像素，高度為300像素，我們可以這樣寫(xiě)：

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

如果我們想要將背景圖片等比例縮放，我們可以只設(shè)置一個(gè)值，

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

這樣，瀏覽器會(huì)自動(dòng)計(jì)算高度，以保持圖片的比例不變。

我們還可以使用contain和cover關(guān)鍵字來(lái)設(shè)置背景圖片的大小。contain關(guān)鍵字會(huì)將圖片縮放***完全適應(yīng)元素，但可能會(huì)留下空白區(qū)域；而cover關(guān)鍵字則會(huì)將圖片縮放***完全覆蓋元素，但可能會(huì)有部分圖片被裁剪。

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

或者：

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

這些設(shè)置可以幫助我們更好地控制背景圖片的大小和顯示方式。