CSS背景圖居中顯示的方法

在CSS中，我們可以使用background-position屬性來控制背景圖的顯示位置，為了讓背景圖居中顯示，我們可以將background-position屬性的值設(shè)置為center，這樣，背景圖就會(huì)在其包含元素的中心位置顯示。

假設(shè)我們有一個(gè)HTML元素，其ID為myElement，我們想要在該元素的背景上顯示一張圖片，并且讓該圖片居中顯示，那么我們可以這樣寫CSS代碼：

#myElement {
    background-image: url('myImage.png');
    background-position: center;
}

在上面的代碼中，url('myImage.png')指定了背景圖的路徑，background-position: center;則讓背景圖在元素中居中顯示。

需要注意的是，如果背景圖的大小比包含它的元素更大，那么背景圖只會(huì)顯示一部分，并且不會(huì)保持其原始比例，為了解決這個(gè)問題，我們可以使用background-size屬性來控制背景圖的大小，我們可以將background-size屬性的值設(shè)置為contain，這樣背景圖就會(huì)保持其原始比例并填充整個(gè)元素。

使用CSS的background-position和background-size屬性，我們可以輕松地實(shí)現(xiàn)背景圖的居中顯示和大小控制。