先期的準備工作
應對乙個專案後期維護成本大的問題，我們最好的解決方案就是在開始前制定一系列的規範來限制問題的產品。好的開始是成功的一半。對於css
sprites，在專案開始前，我們要充分認識乙個產品，同ui設計師做好良好的溝通，對我們未來組成我們sprites圖的各個元素有個大體的概念，比如我們的背景拼圖可能包括什麼。
乙個好的sprite畫布是必須的
網頁設計裡面，grid系統是必不可少的，好的grid能解決我們很多排版問題。grid系統同樣適用於css
sprites。我們需要建立好乙個優秀的畫板，剩下的工作就是將元素合理的置於畫板中了。
這張是我準備的一張css
sprites畫布，我們將在這個psd裡面組合專案中的。
這張畫布是由20px*20px畫素的格仔組成。這個格仔基本上由專案決定的，當我們同ui設計師溝通了解這個專案最多的為16px*16px
圖示時。我們就可以採用這種grid尺寸為畫布了。
sprites畫布有了，接下來就是對圖示進行分組了
對於資訊的歸納總結、分類是乙個有意思的事情。就拿圖示來說，我們就可以根據圖示功能，尺寸等等作為資訊維度進行歸納。其實無論怎麼歸納，都是可以的，只是記得我們以乙個方向作為標準就可以了。
下圖是根據微博站外某元件完成的css
根據設計，我們了解在這個頁面，需要將元素根據功能分為4個維度，即微博品牌展示元素、提交按鈕、操作類小按鈕、提示類icon。於是我將畫布
x軸座標方向每5個格(其實完全可以10個格或者更多)劃分為乙個區域，每個這樣乙個區域的y軸方向不再劃分區域，這樣做的目的是為了以後增加圖示的擴充套件性。於是我們可以非常快速得到乙個圖示的座標了。比如不可用的灰色的分享按鈕
x座標=5*20px=100px y座標=7*20px=140px; 那麼我們就取得了這個圖示的位置即background-position: -100px
-140px。如果抽象成為公式的話，我們設定乙個單元格的寬度為變數n。x座標值gx,y座標值gy。那麼畫布中的元素css背景即為：background-position:-gx*npx
–gy*npx
了。現在圖有了，怎麼取圖也是關鍵
因為盡可能的被整合到一張拼圖，所以我們需要在頁面使用的位置使用空標籤定位的方式將拼圖所需展現的部分展示到頁面中。
我們可以繼續在對應的圖區內增加對應的圖示。但是這個例子同樣暴露了乙個缺陷，如果新增乙個按鈕區域大於5n(100px)，我們的圖區不足以承載。這時候我們可以同產品，設計師溝通協調，商議是否可以取消過大的按鈕設計。如果需求一定，那我們只能沿著x軸方向繼續擴充套件畫布。不過，我們也需要注意無限的放大一張畫布，同樣會造成對頁面效率的影響。
及時的制定好規範，記錄好修改日誌
可能在專案的初期，我們還來不及制定合圖的具體規範，在專案中我們會遇到各種各樣的問題。及時的總結，維護整張css拼圖，在拼圖的psd或者png(使用fireworks)做好注釋，方便他人開發。拼合好的提交到svn時也寫明log內容，這樣便日後查詢。
我們最終的目的
其實css
sprites經過了那麼多年的演變，前端開發者不斷的優化，都是為了提公升頁面效率，提公升團隊開發效率，減少開發維護成本而努力。配合最近非常流行的將
css動態語言化(如sass less等)，增加入變數， 繼承， 運算， 函式等。css
sprites會變的更好玩，會減少更多的開發維護成本。甚至我們在「物件導向」的模組開發方式中，還可以使用乙個類的的同乙個backgroud-
position：(x
y)值，在不同的頁面通過引用不同的(background屬性)實現將乙個頁面內請求量進一步減少的目的。隨著高階瀏覽器的普及我們還可以多使用css3屬性，減少漸變背景圖的使用，將純色icon製作成字型取代拼圖等我們能更大程度上減少的使用量。這篇文章只是拋磚引玉。實際上還有很多關於css
sprites的方法，還有眾多的拼圖生成工具。
CSS Sprites工作原理 z
最初知道是因為google calendar，而且一直不知道其名稱，下面的文章可以讓我們系統的了解這項技術。from css sprites對css布局的意義 優點和缺點介紹 我們知道，自css革命以降，html傾向於語義化，在一般情況下不再在標記裡寫裝飾性的內容而是把呈現的任務交給了css。gui...
深究CSS Sprites技術及其優化
由於網速的限制，頁面開發者都喜歡把網頁裡面的位元組數控制的非常小，往往在乙個資料夾裡散落著n多的小碎圖。隨著網路技術的發展，網速的提公升，大 家越來越重視頁面的載入速度 頁面效率問題，過去的那些小圖便成為了前端開發者的眼中釘，因為每載入一張都會產生一次瀏覽器請求數，發起的請求數越多 那麼頁面載入的速...
解釋下 CSS sprites原理，優缺點
原理 a.css sprites其實就是把網頁中一些背景整合到一張檔案中，再利用css的 background image background repeat background position 的組合進行背景定位，background position可以用數字精確的定位出背景的位置。優點 b...