Apr
21
Loading ...CSS 圖片拼合 (CSS sprites) 可有效降低圖片文件的 HTTP 連接請求數，多個圖片將以一定間距合併為一個大圖片文件，頁面中使用這些圖片的元素將利用 background-position 這一 CSS 屬性來顯示拼合圖片中的指定位置。
這一技術可有效提升網站性能，尤其是網頁上有眾多小圖片時，如許多菜單欄圖標。Yahoo! 首頁是使用此技術的一個實例。
優勢：
創建 CSS sprites 時，必須考慮多重瀏覽器兼容性問題，此工具可以幫您避免這些問題。
CSS Sprite在目前web應用開發中非常流行。通過圖片合併可以減少http請求量，通過CSS的background特性來控制顯示，從而提高web應用的性能。
儘管如此，每次我們都要合併很多小圖片而且需要在CSS中進行精確定位，這是一件相當繁瑣的工作，偶也曾為這個頭疼過。
需求驅動產品，果然，現在已經有人為我們製作了一個方便小工具，來幫助我們完成這個繁瑣的工作。CSS 圖片拼合生成器（CSS Sprite Generator）。該工具是以BSD方式授權發佈的，這意味著我們可以直接免費的應用到商業開發中。有興趣的可以看一下。
Site：http://spritegen.website-performance.org/
Written by 傻仔仔