CSS Sprite的一些最佳實(shí)踐方法
我要評論下面是一張樣圖：
圖片1
本文的目的并不是講CSS Sprite如何讓一個網(wǎng)站更快，而是說一些使用CSS Sprite的時(shí)候的一些最佳實(shí)踐。
不要等到你完成切片之后才開始sprite.
如果你邊切圖邊寫CSS，然后等你完成了整個網(wǎng)站之后再來拼接這些圖片到一個Sprite中，你就不得不完全重寫你的CSS，你也必須要花費(fèi)很多的時(shí)間來用PS拼接大量的圖片——這是件令人倍感糾結(jié)的事情。但是如果邊切圖邊整合，就會比較容易些。
把圖片放到它要顯示的地方的相對的地方
這個小技巧貌似比較難理解。我直到創(chuàng)建一個比較大的sprite的時(shí)候才理解到這一點(diǎn)。比如，如果我們希望一個圖片出現(xiàn)在一個元素的左側(cè)：
將那個圖片放到sprite圖片的右邊(本文開始的那個sprite圖片)。這樣的話，當(dāng)你通過CSS移動背景圖片的位置的時(shí)候，基本上不可能有其它的小圖片意外的出現(xiàn)在它的附近。使用Sprite的時(shí)候常常遇到的一個問題是圖片會出現(xiàn)在它不該出現(xiàn)的位置。
定位時(shí)避免使用bottom或right等
當(dāng)使用CSS sprite的時(shí)候，只用background-position: bottom -300px或background-position: right -200px;非常容易。這剛開始的時(shí)候是可行的，但是問題是，當(dāng)你在寬度上或高度上擴(kuò)展相關(guān)sprite圖片的時(shí)候，原先設(shè)置的位置可能是錯的，因?yàn)槟莻€圖片已經(jīng)不再Sprite圖片的底部或右部了。使用確切的位置來避免這個問題。
給每個圖片足夠的空間
就像你在本文頂部的實(shí)例圖片看到的那樣，那些小圖片都被預(yù)留了足夠的空間。為什么不把他們?nèi)揭粔K來讓sprite圖片更小呢? 因?yàn)槭褂眠@些圖片的元素通常都會有大量的內(nèi)容而且可能會需要擴(kuò)展的間距，以至于其它圖片不會意外出現(xiàn)。
例子：
例子中的每個條目都有個帶數(shù)字的圖片作為背景圖片。如果你仔細(xì)看了上面的那張圖片，你可以看到這三個數(shù)字圖片是如何錯開排列的，這樣如果內(nèi)容增多，其它圖片就不會意外出現(xiàn)。
不用擔(dān)心Sprite圖片的像素大小
如果你的網(wǎng)站經(jīng)過良好的設(shè)計(jì)，那么你將會有一大堆的圖片來整合進(jìn)到sprite里面，這樣你就需要你個非常大的sprite來恰當(dāng)?shù)姆胖眠@些圖片。這是很不錯的。sprite里的空白不會占用太多的文件大小。
相關(guān)文章
css sprites技術(shù)將多個背景集成到一個png圖片上css定位
美國YAHOO在頁面制作中所用到的圖片整合技術(shù)，首先將小圖片整合到一張大的圖片上，然后根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位，感興趣的朋友可以了解下具體的實(shí)現(xiàn)方法2013-04-02使用css sprites來優(yōu)化你的網(wǎng)站在Retina屏幕下顯示實(shí)現(xiàn)原理與代碼
CSS sprites(CSS圖片精靈)已經(jīng)存在很久了。事實(shí)上，八年前就有CSS Sprites的詳細(xì)介紹。CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗(yàn)，不需要2012-12-24css sprites技術(shù) CSS Sprites圖片切割術(shù)與圖片優(yōu)化深入理解
近段時(shí)間一直在做前臺的一些東西，涉及到很多div+css的問題,原來這個叫CSS Sprites技術(shù),我對前臺這些個東西比較感興趣，所以會去了解多一點(diǎn)2012-12-03網(wǎng)頁設(shè)計(jì)中的CSS Sprites技術(shù)介紹及其優(yōu)化方法
CSS Sprites 技術(shù)對于廣大的前端工程師來說應(yīng)該是一點(diǎn)也不陌生。這個被國內(nèi)開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問題，我們又怎樣合理使用這個技術(shù)呢?下面讓我2012-05-31什么是CSS Sprites（圖片合并）技術(shù) 圖文介紹
眾所周知，減少網(wǎng)站加載時(shí)間的最有效的方式之一就是減少網(wǎng)站的HTTP請求數(shù)。實(shí)現(xiàn)這一目標(biāo)的一個有效的方法就是通過CSS Sprites——將多個圖片整合到一個圖片中，然后再用CSS2011-06-21- CSS Sprites的目的就是通過整合圖片，減少對服務(wù)器的請求數(shù)量，從而加快頁面加載速度2011-05-11
- 最近在網(wǎng)上閑逛，然后發(fā)現(xiàn)了一個用css sprite技術(shù)打造的導(dǎo)航，頗為簡便和易用。由于圖片的切換沒有用到任何js，所以顯得干凈整潔。具體想知道什么是css sprite技術(shù)的，可以2011-01-26
- 無處不在的 CSS sptites － 為數(shù)不多的幾個可以直接跳過”流行”這個過程，而可以馬上并且牢牢地躋身于最佳 CSS 實(shí)踐之中的幾個技術(shù)之一。2010-04-17
CSS Sprite優(yōu)化 減少HTTP鏈接數(shù)
CSS Sprite 最大的好處是：減少 HTTP 鏈接數(shù)。提高頁面質(zhì)量2009-08-03- 論壇上提到這樣的問題：“css中用一張背景圖做頁面的技術(shù)有什么優(yōu)勢？” 簡單介紹一下 CSS Sprites 的優(yōu)點(diǎn)： 當(dāng)用戶往U盤中拷200張圖片，會等很久。但是2009-06-21