最初知道是因為google calendar，而且一直不知道其名稱，下面的文章可以讓我們系統的了解這項技術。
from:
css sprites對css布局的意義、優點和缺點介紹
我們知道，自css革命以降，html傾向於語義化，在一般情況下不再在標記裡寫裝飾性的內容而是把呈現的任務交給了css。gui是繽紛多彩的，少不了各種漂亮的圖來裝點。新時代的生產方式是，在html布滿各種各樣的鉤子（hook），然後交由css來處理。
在需要用到的時候，現階段是通過css屬性background-image組合background-repeat, background-position等來實現（題外話：為何我提現階段，因為未來瀏覽器若支援content則又新增另外的實現方法）。我們的主角是，你一定猜到了，就是background-position。通過調整background-position的數值，背景就能以不同的面貌出現在你眼前。其實整體面貌沒有變，由於位置的改變，你看到只該看到的而已。就好比手錶上的日期，你今天看到是21，明天看到是22，是因為它的position往上跳了一格。所以你也大概了解到，css sprites一般只能使用到固定大小的盒子（box）裡，這樣才能夠遮擋住不應該看到的部分。
我們使用yui的sprite.png舉個例子，假如我們有這麼一段**，max代表最大化，min代表最小化，我們需要給它們配上相應的漂亮（這樣我們的**才能夠吸引人）：
[www.52css.com]
最大化最小化
這兩個class都使用同乙個：
[www.52css.com]
.min, .max
效果如下：
[www.52css.com]
[ 可先修改部分** 再執行檢視效果 ]
我們看到一團灰，沒錯，因為我們還沒有指定background-position，預設為 0 0，可以看下sprite.png，處於這個位置正是灰塊。好了，我們要找到代表最大化的加號和代表最小化的減號的位置找出來。經過測量，最大化按鈕位於y軸的350px處，最小化按鈕位於y軸400px處。想一想我們如何才能讓它們能夠顯示出來呢，明顯，要向上提公升sprite.png，得到**如下：
[www.52css.com]
.max
.min
再次檢視效果：
[www.52css.com]
[ 可先修改部分** 再執行檢視效果 ]
這一次我們成功了！
css sprites優點
我們從前面了解到，css sprites為什麼突然跑火，跟能夠提公升**效能有關。顯而易見，這是它的巨大優點之一。普通製作方式下的大量，現在合併成乙個，大大減少了http的連線數。http連線數對**的載入效能有重要影響。
css sprites缺點
由於的位置需要固定為某個絕對數值，這就失去了諸如center之類的靈活性。
前面我們也提到了，必須限制盒子的大小才能使用css sprites，否則可能會出現出現干擾的情況。這就是說，在一些需要非單向的平鋪背景和需要網頁縮放的情況下，css sprites並不合適。yui的解決方式是，加大之間的距離，這樣可以保持有限度的縮放。
css sprites總結
效能壓倒一切。css sprites是值得推廣的一種技術。尤其適宜用於fir，比如固定大小的icon替換。為保持相容性，中的各個部分保持一定的距離是一種不錯的做法。
解釋下 CSS sprites原理，優缺點
原理 a.css sprites其實就是把網頁中一些背景整合到一張檔案中，再利用css的 background image background repeat background position 的組合進行背景定位，background position可以用數字精確的定位出背景的位置。優點 b...
解釋下 CSS sprites原理，優缺點
原理 a.css sprites其實就是把網頁中一些背景整合到一張檔案中，再利用css的 background image background repeat background position 的組合進行背景定位，background position可以用數字精確的定位出背景的位置。優點 b...
解釋下 CSS sprites原理，優缺點
a.css sprites其實就是把網頁中一些背景整合到一張檔案中，再利用css的 background image background repeat background position 的組合進行背景定位，background position可以用數字精確的定位出背景的位置。優點 b.減少...