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

/* 設(shè)置帶有背景圖片的元素 */
div {
background-image: url('background.jpg');
background-size: cover;
background-position: center center;
height: 500px;
width: 100%;
position: relative;
}
/* 設(shè)置最近的圖片 */
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;
}
/* 設(shè)置繼續(xù)遠(yuǎn)一些的圖片 */
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;
}

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

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

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

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