CSS文件預加載圖片是網站優化的一種方式，它可以讓網頁打開速度更快，用戶體驗更流暢。下面我們將介紹如何使用CSS文件來預加載圖片。

/* 定義一個空的CSS類 */
.preload-image {
display: none;
}
/* 在定義類之后，使用以下代碼加載圖片 */
<style>
.preload-image {
background-image: url(圖片URL);
}
</style>

代碼中的".preload-image"是一個我們定義的空CSS類，我們把需要預加載的圖片的URL放到這個類中。當CSS文件加載到瀏覽器中時，圖片也會隨之預加載，提高了網頁的加載速度。

請注意，"display: none;"的代碼是必需的，因為它會隱藏預加載的圖片并將其從頁面中移除，但它仍然被瀏覽器加載并保留在瀏覽器緩存中。

這是預加載多張圖片的完整代碼：

<style>
.preload-image {
display: none;
background-image: url(圖片1 URL);
}
.preload-image2 {
display: none;
background-image: url(圖片2 URL);
}
.preload-image3 {
display: none;
background-image: url(圖片3 URL);
}
.preload-image4 {
display: none;
background-image: url(圖片4 URL);
}
</style>

以上代碼中，我們定義了四個不同的CSS類，每個CSS類都包含一個預加載的圖片URL。這樣就可以加載多張圖片，提高網頁加載速度。

總之，使用CSS文件預加載圖片是一種優化網頁加載速度的有效方式。它可以幫助我們節省時間和帶寬，在網頁的可用性和用戶體驗方面提供更好的表現。