What's CSS Sprite
CSS Sprite是網(wǎng)頁(yè)處理圖片的一種方式。它允許你將網(wǎng)頁(yè)中會(huì)使用到各種零星圖片匯集到一張大的圖片中踪少，在請(qǐng)求圖片時(shí)可以一次性請(qǐng)求過來，不會(huì)出現(xiàn)網(wǎng)頁(yè)中圖片時(shí)一個(gè)個(gè)顯示出來糠涛。依據(jù)目前網(wǎng)絡(luò)速度援奢，可以實(shí)現(xiàn)網(wǎng)頁(yè)打開的同時(shí)雪碧圖（一般小于200KB）也可以同時(shí)顯示出來。
原理
CSS Sprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中忍捡，再利用CSS的“background-image”集漾，“background- repeat”，“background-position”的組合進(jìn)行背景定位砸脊，background-position可以用數(shù)字精確的定位出背景圖片的位置具篇。
優(yōu)點(diǎn)
1.利用CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能凌埂，這也是CSS Sprites最大的優(yōu)點(diǎn)驱显，也是其被廣泛傳播和應(yīng)用的主要原因；
2.CSS Sprites能減少圖片的字節(jié)瞳抓，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和埃疫。
3.解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了孩哑，不需要對(duì)每一個(gè)小元素進(jìn)行命名栓霜，從而提高了網(wǎng)頁(yè)的制作效率。
4.更換風(fēng)格方便横蜒，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式胳蛮，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變秤掌。維護(hù)起來更加方便。
缺點(diǎn)
誠(chéng)然CSS Sprites是如此的強(qiáng)大鹰霍，但是也存在一些不可忽視的缺點(diǎn)闻鉴，如下：
1.在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片茂洒，還要留好足夠的空間孟岛，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好督勺，最痛苦的是在寬屏渠羞，高分辨率的屏幕下的自適應(yīng)頁(yè)面，你的圖片如果不夠?qū)捴前В苋菀壮霈F(xiàn)背景斷裂次询；
2.CSS Sprites在維護(hù)的時(shí)候比較麻煩，如果頁(yè)面背景有少許改動(dòng)瓷叫，一般就要改這張合并的圖片屯吊，無需改的地方最好不要?jiǎng)樱@樣避免改動(dòng)更多的css摹菠，如果在原來的地方放不下盒卸，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了次氨，還要改動(dòng)css蔽介。
例子
.bg_sprite{background-image:url(/整圖地址); background-repeat:no-repeat}
引用該類 .. 然后在元素中逐一定義背景坐標(biāo) .. 以下為關(guān)鍵屬性 ..
#ico1 {width:容器寬度;height:容器高度;background-position:X坐標(biāo) Y坐標(biāo)}
#ico2 {width:容器寬度;height:容器高度;background-position:X坐標(biāo) Y坐標(biāo)}
#ico3 {width:容器寬度;height:容器高度;background-position:X坐標(biāo) Y坐標(biāo)}
.nav {width:容器寬度;height:容器高度;background-position:X坐標(biāo) Y坐標(biāo)}
必須要限定容器大小符合背景圖元素位置 .. 另外 .. XY軸是相對(duì)于整張圖片的左上角來算的 .. 所以取值一定要算清楚。
Additional
- Data URIs
- Icon Fonts
- SVGs
-
<img>andobject-position(CSS3)
