CSS中的背景圖是一個(gè)非常重要的元素，它可以為網(wǎng)頁(yè)增色添彩。在使用CSS背景圖時(shí)，有的時(shí)候我們需要拉伸一部分圖片的大小，以適配網(wǎng)頁(yè)的布局。這個(gè)技巧很常見(jiàn)，下面我們來(lái)看看如何實(shí)現(xiàn)。

/* 1. 首先，我們需要設(shè)置一個(gè)包含背景圖片的元素，比如div */
div {
background-image: url('image.jpg');
background-size: cover;
}
/* 2. 接著，我們使用偽元素:before來(lái)選擇需要拉伸的一部分 */
div:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px; /* 這里設(shè)置拉伸的寬度為100px，根據(jù)實(shí)際情況調(diào)整 */
background-color: white; /* 這里使用白色背景色覆蓋原圖 */
z-index: -1; /* 將偽元素放到底部，覆蓋在原圖上 */
}

以上代碼實(shí)現(xiàn)了將背景圖片的左側(cè)100px拉伸的效果。下面我們?cè)俸?jiǎn)單解釋一下：

首先，我們?cè)O(shè)置了一個(gè)包含背景圖片的div元素，并將背景圖的大小設(shè)置為cover，以適應(yīng)div的大小。

接著，我們使用偽元素:before來(lái)選擇需要拉伸的一部分。我們?cè)O(shè)置了偽元素的寬度為100px，并將背景色設(shè)置為白色，以覆蓋背景圖的左側(cè)部分。

最后，我們將偽元素的z-index設(shè)為-1，以保證它在背景圖片的下面。

這樣，我們就實(shí)現(xiàn)了CSS背景圖的拉伸效果。需要注意的是，這個(gè)方法只能對(duì)單一背景圖生效，如果需要拉伸多張背景圖，則需要重復(fù)以上步驟。