在網頁開發中，經常需要使用背景圖片來裝飾頁面、模塊或元素。而網頁中的背景圖片一般通過 CSS 來控制。下面我們來介紹如何使用 CSS 控制背景圖片的顯示。

首先，我們需要在 CSS 中為相應的元素設置背景圖片，具體代碼如下：

element {
background-image: url("image.png");
}

其中，element 為需要設置背景圖片的元素，url() 中的文件路徑指向我們要使用的背景圖片。

接下來，我們可以使用 background-repeat 屬性來控制圖片的重復。常見的屬性值有：

• repeat：默認值，圖片在水平和垂直方向重復。
• repeat-x：圖片在水平方向重復。
• repeat-y：圖片在垂直方向重復。
• no-repeat：圖片不重復。

具體代碼如下：

element {
background-image: url("image.png");
background-repeat: no-repeat;
}

另外，我們還可以使用 background-position 屬性來調整背景圖片的位置。常見的屬性值有：

• left top：將圖片放置到元素的左上角。
• center top：將圖片放置到元素的中間和頂部對齊。
• right top：將圖片放置到元素的右上角。
• left center：將圖片放置到元素的左邊和中間對齊。
• center center：將圖片放置到元素的中心。
• right center：將圖片放置到元素的右邊和中間對齊。
• left bottom：將圖片放置到元素的左下角。
• center bottom：將圖片放置到元素的中間和底部對齊。
• right bottom：將圖片放置到元素的右下角。

具體代碼如下：

element {
background-image: url("image.png");
background-position: center center;
}

最后，我們還可以使用 background-size 屬性來調整圖片的大小。常見的屬性值有：

• cover：將圖片縮放到完全覆蓋元素的背景區域。
• contain：將圖片縮放到完全包含在元素的背景區域內。
• 具體的像素值：可以自定義圖片的寬度和高度。

具體代碼如下：

element {
background-image: url("image.png");
background-size: cover;
}

通過上述代碼，我們可以輕松地控制背景圖片的顯示效果，從而實現更加豐富多樣的頁面效果。