CSS Sprite在線生成器

作者:Admin 日期:2008-02-05

字體大小: 小中大

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/