CSS背景圖片縮小技巧

在CSS中，我們可以使用background-size屬性來(lái)縮小背景圖片，這個(gè)屬性接受兩個(gè)值，分別是圖片的寬度和高度，通過(guò)調(diào)整這兩個(gè)值，我們可以輕松地縮小背景圖片。

假設(shè)我們有一個(gè)背景圖片，其原始尺寸為800px600px，但我們希望將其縮小到400px * 300px，我們可以使用以下CSS代碼來(lái)實(shí)現(xiàn)

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

在這個(gè)例子中，background-size屬性的值被設(shè)置為400px和300px，這將導(dǎo)致背景圖片在水平和垂直方向上分別縮小到原始尺寸的一半。

如果你希望保持圖片的寬高比不變，你可以只提供一個(gè)值，另一個(gè)值可以設(shè)置為auto。

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

在這個(gè)例子中，背景圖片的寬度被縮小到400px，而高度則被設(shè)置為自動(dòng)，這將保持圖片的寬高比不變。

background-size屬性只在支持CSS3的瀏覽器中有效，如果你需要支持較老的瀏覽器版本，你可能需要使用其他方法來(lái)縮小背景圖片。