什么是css sprites

2020-03-24 16:40:22

字體：大中小

來源：轉載

供稿：網友

什么是 CSS Sprites，它是一種網頁圖片應用處理方式：將一個頁面涉及到的零星圖片都包含到一張大圖中去。這樣一來，當訪問該頁面時，客戶端只需要向服務器請求少量的圖片，圖片越多請求次數越少，造成延遲的可能性也就越小，能有效減輕服務器的壓力。CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”、“background-position”的組合進行背景定位，用數字精確地定位出背景圖片的位置。（如果還沒有完全掌握CSS背景定位，請參閱《CSS背景：詳解background屬性》。）利用CSS Sprites能減少網頁的http請求，從而大大減輕了服務器的負擔，這是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因。由于3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和，CSS Sprites也減少了圖片的字節，對帶寬的要求也相應的減少。而只對一張圖片修改、命名也比對每個小元素圖片進行修改、命名方便很多，從而提高了制作和維護效率。下面通過一個很簡單的實例讓你更好得理解什么是css sprites，以及我們要怎樣運用它：以最常見的為上、下頁鏈接添加按鈕樣式為例。通常我們會把按鈕圖片保存成兩個單獨的文件，再通過左、右兩個鏈接的background屬性調用它們。而css sprites就是把這兩張小圖整合到一張大圖上，通過background-position屬性來控制左、右兩個鏈接的背景顯示。通過以下代碼就實現了我們想要的效果：/* css */
a {background:url(sprites.gif) no-repeat;}
a.left {float:left; padding-left:20px; background-position:0 3px;}
a.right {float:right; padding-right:20px; background-position:right -23px;}/* html */
a target="_blank" CSS網頁布局的常用規范 /a
a target="_blank" 實用CSS重置基礎代碼 /a 相信你現在對css sprites以及它的原理、用法都有了初步的認識吧。制作css sprites圖片是個細活，尤其是有非常多的小圖需要整合的頁面，工作量會比較大。我們在做之前就要仔細考慮它們的布局問題，這樣才能少走彎路。比如上面的例子中兩個藍色的按鈕需要在網頁中的同一排顯示，在做圖片的時候我們就不能把它們放在同一水平線上，以免它出現在不該出現的位置擾亂頁面。在調整一個小圖片的位置時，要考慮到它的左、右多少像素范圍內不能出現別的圖片，還有它所在的行，上、下多少像素范圍是安全距離？做圖時要多測量、多測試、不怕繁瑣，這樣才能做出體積小巧、布局合理的優質圖片。精工出細活！小貼士：在頁面小圖很多，需要做成多個sprites圖片時，可以按顏色分類，盡量將相同、相近顏色的小圖整合在一張大圖上，這樣可以有效減小合成后圖片的體積html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：Internet Explorer 8 ：HTML 和 CSS 支持

下一篇：詳解CSS中的選擇器