在網站設計和開發過程中，我們常常需要使用背景圖片來達到更好的視覺效果。然而，在使用背景圖片時，圖片文件大小的問題也需要我們關注，因為圖片過大可能會增加網頁加載時間和浪費用戶的流量。因此，我們需要學會如何縮小背景圖片，從而優化網站性能。

CSS中提供了多種縮小背景圖片的方法，其中最常用的方法為background-size屬性。

background-size: 寬度 高度;

其中，寬度和高度可以是一個具體的數值（如100px、50%等），也可以是一個關鍵字（如contain和cover），具體含義如下：

• 具體數值：表示背景圖片縮小后的寬度和高度，可以是像素值或百分比。
• contain：表示將背景圖片縮小后完全放入容器中，保持原圖比例不變。
• cover：表示將背景圖片縮小后鋪滿容器，并保持原圖比例不變。

下面是一個使用background-size屬性縮小背景圖片的例子：

.box {
background-image: url('example.jpg');
background-size: 50%;
height: 300px;
width: 400px;
}

上述代碼將一個高度為300px、寬度為400px的盒子的背景圖片縮小為原圖的50%。

需要注意的是，使用background-size屬性縮小背景圖片時，一定要保持圖片的比例不變，否則可能會導致圖片變形或裂開。同時，縮小背景圖片還可能會影響圖片質量，因此需要根據具體情況進行取舍。

除了background-size屬性，CSS中還提供了其他的一些方法來優化背景圖片，如使用較小的圖片、壓縮圖片文件大小等。在實際開發中，需要根據具體情況來選擇最合適的優化方法。