css sprite做為乙個前端人員來說必須要掌握，但是這個對於剛學習的同學來說是由困難的，下面我就專門為這個內容做一次分享，這裡沒有網路位址，若內容顯示不全面你可以到我的個人部落格中
1. [**][css]**
csssprites在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是差不多的，所以無需顧忌這個問題。 加速的關鍵，不是降低重量，而是減少個數。傳統切圖講究精細，規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張都會向伺服器傳送請求。所以，越多請求次數越多，造成延遲的可能性也就越大。
css sprites其實就是把網頁中一些背景整合到一張檔案中，再利用css的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position可以用數字能精確的定位出背景的位置。
下面我就詳細的講解下他的使用技巧，包你現在不懂的童鞋會有個清楚的全新了解，雖然目前有這樣的工具，但是還是要先清楚他的原理，技巧性的來做也會很快速的完成定位，下面我分享加個案例。
首先跟大家說明一點，由於需要定位的背景都是合併在一張圖的，所以都是一刀切的，要麼是x軸座標一致要麼是y軸座標一致，也就有了***要講述的2種型別了。
1。橫向定位座標
橫向定位座標意思就是y軸座標固定,它的特點就是每個圖示的高度是一致的，通過改變x座標的位置來改變背景。只需測量每個圖示的寬度就可以知道x軸的座標了。如果你還不知道這個規律，下面我就講解給你聽吧，下面拿我做的2個案例來說事。
效果圖：
實際背景圖：
那麼具體來講解怎麼來定位，這裡是改變x座標來定位。
由於高度都是一樣所以y軸上的座標都是0或top
這裡每個圖示我是用乙個span做背景的，下面具體分析下**：
join us on:
下面是css code:
.sharelogo
.facebooklogo
.pinterestlogo
.twitterlogo/**/
.flickrlogo
.youtubelogo
.bloglogo
.sl他們的背景都是公用這一張背景：background-image:url(../images/shareicon.jpg);
每個元素的背景都不允許重複：即：background-repeat:no-repeat;
讀到這裡你有發現乙個規律，就是每個元素的座標等於前面元素的座標值加上寬度。即元素的橫向座標值公式等於。相鄰元素的座標值加上寬度。
pinterestlogo 的值等於facebooklogo的座標值20px+facebooklogo的寬度20px ;是不是很簡單啊，只要你知道元素的寬度就可以，因為橫向座標等必須要給個固定的寬度，所以這一步測量寬度不是浪費時間。希望仔細看原始碼中座標值的規律。
不管是橫向定位與縱向定位座標的時候，他們的起始位置都是background-position:0 0;而橫向定位的時候高度是固定的，所以每次只需改變x座標的值就實現了。
比如facebook的logo是起始位置的圖示，所以它的座標值是0,0，就實現了它的定位。
那麼pinterest的logo是它的下面乙個，就是從facebook的寬度負值算起。由於facebook的寬度是21px;所以pinterest的logo座標就是background-position:-20px 0; 下面以此類推
twitterlogo 是pinterstlogo的下面乙個，那麼就是用pinterstlogo的座標值加上pinterstlogo
的寬度,就得到了twitterlogo的座標位置了。就是-（20px+42px）=-62px;即twitterlogo 的座標值為.twitterlogo
讀到這裡你有發現乙個規律，就是每個相鄰元素的座標等於前面元素的座標值加上它前面元素的寬度。即元素的橫向座標值公司等於。相鄰元素的座標值加上它的寬度。好了下面講第二種方案了。
2.縱向定位座標
縱向定位座標就是x軸座標固定，改變y軸座標值來實現背景的改變，他們的寬度是固定的，所以他們的x軸座標始終都是相同的，即0或left。下面我分享個案例
效果圖：
實際背景：
css code:
3.寬度和高度都相等的時候，那是最好不過了，直接做乘法，相信你的數學能力一家過了小學3年級了，ok，還是來分享下吧。
1.寬度高度想等的情況下等位x軸座標，這種情況通常都出現在一組按鈕下，滑鼠滑過和點選時候的背景改變。這種情況我也總結出來了，有公式：
x軸座標=-n（起始位置+寬度）.
其中n值從0開始。即所有的起始位置的座標都是0,0開始起。下面依次類推。
比如你現在所要定位的元素是第3個，假設我們這裡的圖示的寬度為30px.那麼他的x軸座標就等於。x=-3*(0+30px);
y軸的座標=-n(起始位置+高度)
比如你現在所要定位的圖示為第6個位置，假設這裡的高度也是32px;那麼他的y軸座標就是
y=-6（0+32px）=-192px. 哈哈，當然有許多的工具，那個叫什麼gaga的工具雖然挺好，但是我沒用過，我一直都用我自己的這套，我自己在實踐中感覺挺方便的，所要分享下。
CSS Sprite使用整理
css sprite簡介 利用css sprites能很好地減少了網頁的http請求次數 從而大大的提高了頁面的效能,節省時間和頻寬。css sprites 在國內很多人叫 css精靈 是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就...
css sprite 介紹和例項
csssprites在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是差不多的，所以無需顧忌這個問題...
CSS sprite注意事項
在 中，的家長會發出http請求，一張需要一條http請求，如果乙個頁面需要載入多張，那麼會相應的發出多條http請求。http請求書越多，訪問伺服器的次數就越多，伺服器的壓力越大。css sprite技術將多張合併成一張大圖，減少網頁http請求數和伺服器也來。但是在使用css sprite中，我...