CSS中改變背景圖片大小的方法

在CSS中，我們可以使用background-size屬性來(lái)改變背景圖片的大小，這個(gè)屬性可以設(shè)置為一個(gè)具體的值，或者設(shè)置為contain、cover等關(guān)鍵詞，以達(dá)到不同的效果。

1、設(shè)置具體值：

通過(guò)設(shè)定background-size的具體值，我們可以***地控制背景圖片的大小，如果我們想要將背景圖片的高度設(shè)置為300像素，寬度設(shè)置為200像素，我們可以這樣寫(xiě)：

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

2、使用關(guān)鍵詞：

除了設(shè)置具體值外，我們還可以使用contain和cover關(guān)鍵詞來(lái)控制背景圖片的大小。contain關(guān)鍵詞會(huì)保持圖片的原始縱橫比，同時(shí)確保圖片完全適應(yīng)其包含塊，而cover關(guān)鍵詞則會(huì)將圖片擴(kuò)展***足夠大，以覆蓋整個(gè)包含塊，但可能會(huì)超出原始圖片的縱橫比。

.div {
  background-image: url('image.jpg');
  background-size: contain; // 保持原始縱橫比
}

或者：

.div {
  background-image: url('image.jpg');
  background-size: cover; // 覆蓋整個(gè)包含塊
}

3、響應(yīng)式設(shè)計(jì)：

在響應(yīng)式設(shè)計(jì)中，我們可能需要根據(jù)屏幕大小的不同來(lái)調(diào)整背景圖片的大小，這時(shí)，我們可以結(jié)合媒體查詢(xún)（Media Queries）來(lái)實(shí)現(xiàn)。

@media (max-width: 600px) {
  .div {
    background-size: 100px 150px;
  }
}

通過(guò)上述方法，我們可以靈活地在CSS中控制背景圖片的大小，以適應(yīng)不同的設(shè)計(jì)和布局需求。