css sprite技術(shù)解析

　　CSS Sprites在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當(dāng)前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。 加速的關(guān)鍵，不是降低重量，而是減少個數(shù)。傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實規(guī)格大小無所謂，計算機(jī)統(tǒng)一都按byte計算。客戶端每顯示一張圖片都會向服務(wù)器發(fā)送請求。所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。

　　CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

　　下面我就詳細(xì)的講解下他的使用技巧，包你現(xiàn)在不懂的童鞋會有個清楚的全新了解，雖然目前有這樣的工具，但是還是要先清楚他的原理，技巧性的來做也會很快速的完成定位，下面我分享加個案例。

　　首先跟大家說明一點(diǎn)，由于需要定位的背景都是合并在一張圖的，所以都是一刀切的，要么是X軸坐標(biāo)一致要么是Y軸坐標(biāo)一致，也就有了我下面要講述的2種類型了。

　　1。橫向定位坐標(biāo)

　　橫向定位坐標(biāo)意思就是Y軸坐標(biāo)固定,它的特點(diǎn)就是每個圖標(biāo)的高度是一致的，通過改變x坐標(biāo)的位置來改變背景。只需測量每個圖標(biāo)的寬度就可以知道x軸的坐標(biāo)了。如果你還不知道這個規(guī)律，下面我就講解給你聽吧，下面拿我做的2個案例來說事。

　　效果圖：

　　實際背景圖：

　　那么具體來講解怎么來定位，這里是改變X坐標(biāo)來定位。

　　由于高度都是一樣所以Y軸上的坐標(biāo)都是0或top

　　這里每個圖標(biāo)我是用一個span做背景的，下面具體分析下代碼：

　　下面是Css code:

.sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}

　　.facebookLogo{background-position:0 0;width:20px;}

　　.pinterestLogo{background-position:-20px 0;width:42px;}

　　.twitterLogo{background-position:-62px 0;width:30px;}/**/

　　.flickrLogo{background-position:-92px 0;width:130px;}

　　.youtubeLogo{background-position:-222px 0;width:98px}

　　.blogLogo{background-position:-320px 0;width:84px;}

　　.sl{float:left;padding-right:10px;}

　　他們的背景圖片都是公用這一張背景：background-image:url(../images/shareIcon.jpg);

　　每個元素的背景都不允許重復(fù)：即：background-repeat:no-repeat;

　　讀到這里你有發(fā)現(xiàn)一個規(guī)律，就是每個元素的坐標(biāo)等于前面元素的坐標(biāo)值加上寬度。即元素的橫向坐標(biāo)值公式等于。相鄰元素的坐標(biāo)值加上寬度。

　　pinterestLogo 的值等于facebookLogo的坐標(biāo)值20px+facebookLogo的寬度20px ;是不是很簡單啊，只要你知道元素的寬度就可以，因為橫向坐標(biāo)等必須要給個固定的寬度，所以這一步測量寬度不是浪費(fèi)時間。希望仔細(xì)看源碼中坐標(biāo)值的規(guī)律。

　　不管是橫向定位與縱向定位坐標(biāo)的時候，他們的起始位置都是background-position:0 0;而橫向定位的時候高度是固定的，所以每次只需改變X坐標(biāo)的值就實現(xiàn)了。

　　比如facebook的logo是起始位置的圖標(biāo)，所以它的坐標(biāo)值是0,0，就實現(xiàn)了它的定位。

　　那么pinterest的logo是它的下面一個，就是從facebook的寬度負(fù)值算起。由于facebook的寬度是21px;所以pinterest的logo坐標(biāo)就是background-position:-20px 0; 下面以此類推twitterLogo 是pinterstLogo的下面一個，那么就是用pinterstLogo的坐標(biāo)值加上pinterstlogo的寬度,就得到了twitterLogo的坐標(biāo)位置了。就是-（20px+42px）=-62px;即twitterLogo 的坐標(biāo)為.twitterLogo{background-position:-62px 0;width:30px;}讀到這里你有發(fā)現(xiàn)一個規(guī)律，就是每個相鄰元素的坐標(biāo)等于前面元素的坐標(biāo)值加上它前面元素的寬度。即元素的橫向坐標(biāo)值公司等于。相鄰元素的坐標(biāo)值加上它的寬度。好了下面講第二種方案了。

　　實際背景圖片：

ul{margin:0;padding:0;float:left;width:32px;}

　　ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;}

　　.f{background-position:0 0;height:32px;}.p{background-position:0 -32px;height:20px}/*Y軸坐標(biāo)等于起始位置的高度 即：-（0+32）*/

　　.fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y軸坐標(biāo)加上前面元素的高度,即：-（32+20） */

　　.h{background-position:0 -84px;height:32px;}/*等于前面元素的Y軸坐標(biāo)加上前面元素的高度*即：-（52+32）*/

　　.t{background-position:0 -116px;height:32px;}/*等于前面元素的Y軸坐標(biāo)加上前面元素的高度，即：-（84+32）*/

　　3.寬度和高度都相等的時候，那是最好不過了，直接做乘法，相信你的數(shù)學(xué)能力一家過了小學(xué)3年級了，Ok，還是來分享下吧。

1.寬度高度想等的情況下等位X軸坐標(biāo)，這種情況通常都出現(xiàn)在一組按鈕下，鼠標(biāo)滑過和點(diǎn)擊時候的背景改變。這種情況我也總結(jié)出來了，有公式：X軸坐標(biāo)=-n（起始位置+寬度）.其中n值從0開始。即所有的起始位置的坐標(biāo)都是0,0開始起。下面依次類推。

比如你現(xiàn)在所要定位的元素是第3個，假設(shè)我們這里的圖標(biāo)的寬度為30px.那么他的X軸坐標(biāo)就等于。x=-3*(0+30px);Y軸的坐標(biāo)=-n(起始位置+高度)

比如你現(xiàn)在所要定位的圖標(biāo)為第6個位置，假設(shè)這里的高度也是32px;那么他的Y軸坐標(biāo)就是Y=-6（0+32px）=-192px.

　　到此，大家應(yīng)該也明白CSS Sprite是一項什么技術(shù)，以及如何運(yùn)用了。

　　最后送一點(diǎn)福利給大家， CSS 圖片拼合生成器

CSS 圖片拼合生成器（英文名為css sprite generator），是一款支持多語言的免費(fèi)CSS圖片拼合生成器，目前支持18種語言（包括簡體中文）。該在線工具非常易用，你只需要上傳你需要拼合的CSS圖片壓縮包，設(shè)置重復(fù)圖片處理辦法，調(diào)整原圖大小，拼合圖片輸出設(shè)置參數(shù)，CSS輸出選項即可生成CSS拼合圖片和CSS文件。

　　css sprite generator是前端設(shè)計師高效率的在線工具首選。

css sprite generator官方網(wǎng)站：spritegen.website-performance.org