[CSS] Image Sprites
在做網頁設計時,我們時常為了網站美感,在網頁中放入許多小圖(ex: 按鈕、文章標題背景、標籤) 。然而,當一個網頁有多個圖檔要載入時(ex: 30張以上),瀏覽器在解析時,會不停地發送Http Requests,使得流暢度降低,也易造成client端負擔。因此,利用CSS Sprites可減少瀏覽器對圖檔的Http Requests。此一技巧是將網頁中會用到的背景圖檔,全部集中放在一個圖片檔中,並利用 CSS 的 background-image 與 background-position 屬性將欲顯示的按鈕圖等部分顯示出來。如此,便可降低Http Requests。 例如以下語法: