CSS sprites 可有效降低圖片文件的 HTTP 連接請求數。將多個圖片以一定間距合併為一個圖片文件。頁面中使用這些圖片的元素將利用 background-position 這一 CSS 屬性來顯示合併圖片中的指定位置。

這項技術可以提升網站效能,尤其當網頁上有很多小圖片時,例如許多的選單圖示。 Yahoo! 首頁便是使用此技術的一例。

優勢

建立 CSS sprites 時,必須考慮多重瀏覽器相容性問題,這個工具可以幫您避免這些問題。

劇本

劇本 (9.0 以前版本) 無法顯示偏移大於 2042px 或小於 -2042px 的背景圖。這個工具會自動合併為多列圖片以適應垂直高度超過此數值的情況。

原生

原來在顯示重複背景是有一個 bug。幸運的是可設定一個較大的水平偏移植來解決這個問題(配置) 。

延伸閱讀

A List Apart  發表了一篇名為 CSS Sprites: Image Slicing's Kiss of Death 的文章以介紹 CSS sprites。如果您上不了解此技術請到 A List Apart 查閱。