在網頁設計中，背景是非常重要的一部分。為了使網頁看起來更加美觀，我們通常會使用各種背景圖片。在實際開發中，經常會出現需要使用拼接背景圖片的情況，下面我們就來介紹一下如何在CSS中拼接背景圖片。

/* 首先定義背景圖片1 */
.bg1 {
background-image: url('bg1.jpg');
background-repeat: no-repeat;
background-position: center;
}
/* 接著定義背景圖片2 */
.bg2 {
background-image: url('bg2.jpg');
background-repeat: no-repeat;
background-position: center;
}
/* 最后將兩個背景圖片拼接起來 */
.container {
background-image: url('bg1.jpg'), url('bg2.jpg');
background-repeat: no-repeat;
background-position: center, center 500px; /* 定義第二張圖片的位置 */
}

在上面的代碼中，我們首先定義了兩個背景圖片，其中`.bg1`表示背景圖片1，`.bg2`表示背景圖片2，然后我們將這兩個背景圖片拼接起來，并將它們應用到了`.container`元素上。這里需要注意的是，在拼接背景圖片時，我們需要在背景圖片的路徑之間使用逗號分隔，并為每個背景圖片定義相應的位置。

除了使用逗號拼接背景圖片之外，我們還可以使用`background-size`屬性將不同大小的背景圖片拼接在一起。具體設置方式如下：

/* 定義背景圖片1 */
.bg1 {
background-image: url('bg1.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%; /* 等比例拉伸背景圖片 */
}
/* 定義背景圖片2 */
.bg2 {
background-image: url('bg2.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 50%; /* 只拉伸背景圖片的高度 */
}
/* 將兩個背景圖片拼接起來 */
.container {
background-image: url('bg1.jpg'), url('bg2.jpg');
background-repeat: no-repeat;
background-position: center, center 500px; /* 定義第二張圖片的位置 */
}

在上面的代碼中，我們將背景圖片1的寬高設置為100%，并使用`background-size`屬性進行等比例拉伸，而背景圖片2的寬設置為100%，高設置為50%，只拉伸了背景圖片的高度。然后我們將這兩個背景圖片拼接起來，并將它們應用到了`.container`元素上。

總之，使用CSS拼接背景圖片可以讓我們更加輕松地實現網頁設計中的需要。無論是使用逗號拼接還是`background-size`屬性拼接，具體應該根據具體的需求來決定。希望本文對你有所幫助！