CSS Sprites簡介
通常被意譯為「CSS影像拼合」或「CSS貼圖定位」。 CSS Sprites並非一門新技術,目前它已經在網頁開發中發展得較為成熟,阿里巴巴各子公司的網頁中到處都可發現css sprites 的影子。但CSS Sprites並不是什麼金科玉律,但在許多情況下,它有著一定的優勢,最重要的是它可以減輕伺服器的負載,提高網頁載入速度。隨著Web設計朝著精緻、巧妙的方向發展,設計師們開始考慮用非Javascript的方式製作滑鼠滑過、懸浮選單的效果,這時CSS Sprite應運而生。
說穿了,CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background- position可以用數字能精確的定位出背景圖片的位置。
當頁面加載時,不是加載每個單獨圖片,而是一次加載整個組合圖片。這是一個了不起的改進,它大大減少了HTTP請求的次數,減輕伺服器壓力,同時縮短了懸停載入圖片所需的時間延遲,使效果更流暢,不會停頓。
CSS Sprites相關文章
CSS Sprites應用
在這方面,淘寶網做的比較好,我就以淘寶網為例吧。
實例一:淘寶頻道頁面導航
效果圖:
sprites圖: