The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

使用 CSS Sprites 設計網頁但不用 background-image 的技巧

使用 CSS Sprites 技巧可以有效減少 HTTP Request 的數量並且加速網頁載入與顯示的速度。簡單的來說,CSS Sprites 就是將頁面中會用到的背景圖檔全部集中放在一個圖片檔中,並利用 CSS 的 background-image 與 background-position 屬性將欲顯示的背景圖部分露出,對瀏覽器來說,如果整頁的背景圖原本有 30 張就會有 30 個 HTTP Request,但全部合在一張圖片後就只需要一個 HTTP Request 而已,還可以透過 HTTP Cache 技巧將圖片快取在瀏覽器中。

... 繼續閱讀 ...