在CSS中設置背景圖片是很常見的做法，而且背景圖片的大小、位置、層次等屬性也可以通過CSS樣式進行控制。本篇文章主要介紹如何通過CSS控制背景圖片的遠近程度，進而改變背景圖片的層次關系。

/* 設置帶有背景圖片的元素 */
div {
background-image: url('background.jpg');
background-size: cover;
background-position: center center;
height: 500px;
width: 100%;
position: relative;
}
/* 設置最近的圖片 */
div::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('foreground.jpg');
background-size: cover;
background-position: center center;
opacity: 0.5;
}
/* 設置繼續(xù)遠一些的圖片 */
div::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('midground.jpg');
background-size: cover;
background-position: center center;
opacity: 0.3;
}

實現(xiàn)背景圖片從近到遠的效果，需要一個容器元素和兩個偽元素（before和after）。容器元素需要設置背景圖片，寬度和高度，位置需要設置為相對定位（relative）。然后，通過設置before和after的寬度、高度、背景圖片、位置和透明度實現(xiàn)前景、中景、背景的視覺效果。

在這里，before的opacity設置為0.5，after的opacity設置為0.3，用來調(diào)整背景圖片的明暗度。如果需要增加更多層的圖片，可以按照上述方法設置新的偽元素。

需要注意的是，CSS控制背景圖片的層次關系是通過z-index屬性實現(xiàn)的。如果需要改變背景圖片層次，可以在CSS中分別為容器元素和偽元素添加z-index屬性。

綜上所述，通過CSS將背景圖片排列成從近到遠的視覺效果，使得網(wǎng)頁界面更加生動飽滿。通過對相關CSS屬性的控制，還可以實現(xiàn)更加豐富多彩的背景圖片效果。