使用 CSS3 Sprites 可以為網站減少 HTTP 請求，從而提升網站的響應速度和性能。Sprites 是一種將多張小圖合并成一個統一的圖像文件，并通過 CSS3 技術來顯示指定位置的圖像的方法。這種方法可以減少網頁加載中的圖片數量，從而使網頁加載速度更快，同時也可以提高用戶的體驗。 為了使用 CSS3 Sprites，我們需要定義一個包含所有小圖片的大圖，然后通過 CSS3 技術來指定每個小圖片在大圖中的位置，以及指定顯示的大小和位置。大圖和小圖片可以通過各種圖形工具來創建和編輯。 下面是一個例子，展示如何使用 CSS3 Sprites 來創建一個包含多個按鈕的導航欄。首先，我們創建一個大圖，如下所示：

nav_sprite.png
---------------
|             |
|             |
|             |
|   Button1   |
|             |
|             |
---------------
|             |
|             |
|             |
|   Button2   |
|             |
|             |
---------------
|             |
|             |
|             |
|   Button3   |
|             |
|             |
---------------

然后，在 CSS 文件中創建一個樣式，指定每個按鈕在大圖中的位置和樣式，如下所示：

nav .button1 {
background-image: url(nav_sprite.png);
background-position: 0px 0px;
width: 100px;
height: 50px;
}
nav .button2 {
background-image: url(nav_sprite.png);
background-position: 0px -50px;
width: 100px;
height: 50px;
}
nav .button3 {
background-image: url(nav_sprite.png);
background-position: 0px -100px;
width: 100px;
height: 50px;
}

最后，在 HTML 中創建一個導航欄，包含多個按鈕，并為每個按鈕指定對應的樣式，如下所示：

通過這種方法，我們可以使用 CSS3 Sprites 來創建高效的網站導航欄，同時減少 HTTP 請求并提升用戶體驗。