CSS Sprites 是一種將多個小圖標或背景圖像合并到一個大圖中的技術。通過減少HTTP請求次數，可以顯著提高頁面加載速度。其核心原理是：通過設置元素的背景圖（background-image）為這個大圖，然后調整背景位置（background-position）來顯示需要的部分。

一：打開在線工具?

https://www.toptal.com/developers/css/sprite-generator

1. 將多個小圖標或背景圖合并成一張大圖，并記錄每個小圖在大圖中的位置坐標（通常使用工具自動生成坐標）。如下：

?上傳完所有圖片后點擊DOWNLOAD

?

html?

<div class="sprite icon-home"></div>
<div class="sprite icon-settings"></div>

css

/* 基礎樣式 */
.sprite {background-image: url("sprite.png"); /* 引用大圖 */background-repeat: no-repeat;       /* 禁止重復 */display: inline-block;              /* 行內塊級元素 */
}/* 單個圖標尺寸 */
.icon-home {width: 50px; height: 50px;/* 調整背景圖位置顯示對應圖標 */background-position: 0 0; /* 顯示左上角第一個圖標 */
}.icon-settings {width: 50px;height: 50px;background-position: -50px 0; /* 左移50px顯示第二個圖標 */
}

?