如何調(diào)整CSS背景圖大小

在CSS中，可以使用background-size屬性來調(diào)整背景圖的大小，這個(gè)屬性接受兩個(gè)值，分別是水平和垂直方向上的尺寸，如果你想讓背景圖在水平方向上填充整個(gè)容器，可以將水平尺寸設(shè)置為100%，如果你想讓背景圖在垂直方向上填充整個(gè)容器，可以將垂直尺寸設(shè)置為100%，如果你想讓背景圖既在水平方向上填充整個(gè)容器，又在垂直方向上填充整個(gè)容器，可以將兩個(gè)尺寸都設(shè)置為100%。

假設(shè)你有一個(gè)div元素，它的ID是myDiv，你希望它的背景圖在水平和垂直方向上都能填充整個(gè)容器，可以這樣寫CSS代碼：

#myDiv {
    background-image: url('myBackgroundImage.png');
    background-size: 100% 100%;
}

在上面的代碼中，url('myBackgroundImage.png')是背景圖的路徑，100% 100%是水平和垂直方向上的尺寸。

如果你想讓背景圖的大小適應(yīng)容器的尺寸，可以使用contain或cover關(guān)鍵字。contain關(guān)鍵字會(huì)讓背景圖保持其原始縱橫比，同時(shí)縮放***足夠大以填充容器。cover關(guān)鍵字會(huì)讓背景圖擴(kuò)展***足夠大以覆蓋整個(gè)容器，可能會(huì)超出容器的尺寸。

假設(shè)你有一個(gè)div元素，它的ID是myDiv，你希望它的背景圖能夠適應(yīng)容器的尺寸，可以這樣寫CSS代碼：

#myDiv {
    background-image: url('myBackgroundImage.png');
    background-size: contain;
}

或者：

#myDiv {
    background-image: url('myBackgroundImage.png');
    background-size: cover;
}

在上面的代碼中，url('myBackgroundImage.png')是背景圖的路徑，contain或cover是縮放關(guān)鍵字。