CSS 是前端開發中非常重要的一項技能，掌握了它，我們可以自由地控制頁面中的各個元素，其中，控制背景圖也是 CSS 的一項重要功能。下面，我們就來學習一下如何用 CSS 控制背景圖。 首先，我們需要在 CSS 文件中設置一個樣式規則，如下：

p {
background-image: url("圖片地址");
background-repeat: no-repeat;
background-size: cover;
}

上述代碼中，我們使用了 p 標簽來作為選擇器，表示要控制所有的段落元素的背景圖，則所有段落元素的背景圖都會被設置為“圖片地址”所指定的圖片。接著，我們在樣式規則中使用了 background-image 屬性，它的作用就是指定要使用的背景圖，而 background-repeat 屬性則是控制背景圖的重復方式，設置為“no-repeat”表示不重復。最后，background-size 屬性用于設置背景圖的大小，cover 表示要將整個背景區域完全填滿，同時保持圖片的比例，這樣可以保證無論瀏覽器窗口大小如何，背景圖片都能夠完美適應。 當然，如果你需要控制多個元素的背景圖，你可以使用類選擇器或 ID 選擇器來指定元素，例如：

.box {
background-image: url("圖片地址");
background-repeat: no-repeat;
background-size: cover;
}
#header {
background-image: url("頭部背景圖片地址");
background-repeat: no-repeat;
background-size: cover;
}

上面的代碼中，我們使用了 .box 類選擇器和 #header ID 選擇器來分別控制 class 為 box 的元素和 ID 為 header 的元素的背景圖，它們的樣式規則分別不同。 最后，我們需要注意的一點是，為優化網站性能，我們應盡量避免使用過大的背景圖，而應該使用壓縮過的圖片，并盡量減少使用背景圖的次數，這樣可以加快網站的加載速度，提升用戶體驗。 通過上述方法，我們可以輕松地控制背景圖，讓頁面更加美觀，如果您有更好的實現方法，歡迎在評論區留言分享。