在網頁設計中，背景圖是很重要的一部分，然而有時候我們希望不同元素使用的背景圖不要疊加在一起，這時候CSS就成為了我們解決問題的利器。 使用CSS時，我們可以利用background-origin屬性來控制背景圖的位置。如果我們將background-origin屬性設置為border-box，背景圖就會從邊框的外側開始填充，這樣就可以避免不同元素的背景圖重疊在一起了。 下面是一個例子：

p {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-origin: border-box;
padding: 20px;
}

在這個例子中，我們將背景圖應用在p元素上，并將background-origin設置為border-box。同時，我們也設置了padding來增加p元素的內邊距，這樣背景圖就不會和p元素的文本內容重疊在一起。 值得注意的是，如果我們將background-origin設置為padding-box或content-box，背景圖就會從內邊距或內容區域的外側開始填充，這有可能導致不同元素的背景圖重疊在一起。因此，在選擇background-origin屬性時，我們需要根據實際情況進行選擇。 總的來說，利用CSS的background-origin屬性可以很方便地控制背景圖的位置，避免不同元素背景圖重疊的問題，從而讓網頁設計更加美觀和合理。