本文目錄導(dǎo)讀：

1. 使用高度屬性
2. 使用背景尺寸屬性

CSS背景圖高度設(shè)置詳解

在CSS中，背景圖高度的設(shè)置是一個(gè)常見的需求，我們可以通過兩種主要方式來實(shí)現(xiàn)：使用高度屬性或使用背景尺寸屬性。

使用高度屬性

我們可以使用CSS的“height”屬性來設(shè)置背景圖的高度，如果我們想要將背景圖的高度設(shè)置為300像素，我們可以這樣寫：

body {
    background-image: url('path/to/your/image.jpg');
    height: 300px;
}

這種方法簡(jiǎn)單直觀，但是需要注意的是，如果背景圖的高度超過容器的高度，那么背景圖可能會(huì)被截?cái)?，只顯示容器高度內(nèi)的部分。

使用背景尺寸屬性

另一種設(shè)置背景圖高度的方法是使用CSS的“background-size”屬性，這個(gè)屬性允許我們指定背景圖的大小，包括高度和寬度，如果我們想要將背景圖的高度設(shè)置為300像素，我們可以這樣寫：

body {
    background-image: url('path/to/your/image.jpg');
    background-size: 300px;
}

與高度屬性不同，背景尺寸屬性不會(huì)截?cái)啾尘皥D，而是會(huì)等比例縮放背景圖，使其適應(yīng)容器的大小，如果背景圖的高度超過容器的高度，那么背景圖會(huì)被縮放并顯示全部?jī)?nèi)容。

需要注意的是，以上兩種方法都假設(shè)背景圖位于容器的中心位置，如果背景圖的位置不在中心，那么可能需要結(jié)合使用其他CSS屬性來調(diào)整其位置。