引言：

提高網(wǎng)頁顯示速度最有效的一個方法是減少頁面的HTTP請求次數(shù)，為了減少HTTP請求次數(shù)，最直接有效的方法是使用精靈圖片(CSS sprites)，精靈圖片是把許多圖片放到一張大圖片里面，通過CSS來顯示圖片的一部分。

本文的目的不是闡述精靈圖片如何讓網(wǎng)頁下載更快，而是介紹在創(chuàng)建精靈圖片時的一些實戰(zhàn)經(jīng)驗。

下面是一張精靈圖片

不要等你完成所有工作后再開始使用CSS精靈

在網(wǎng)站全部完成后，你的CSS和圖片也都已經(jīng)創(chuàng)建好了，這時候你再使用CSS精靈，也就意味著你要返回重寫CSS，并且還要把用到的一大堆圖片再丟到Photoshop里拼合成一張圖片，這是非常痛苦和乏味的。如果在剛開始構(gòu)建頁面時就著手使用CSS精靈，那么一切都會變得簡單。

按圖片顯示相反的方向放置圖片

這一條有點難以理解，我是在創(chuàng)建一張大的精靈圖片中途失敗后才意識到它的。假如一張圖片應(yīng)該出現(xiàn)在一個元素的左邊，如下圖

請將這張圖片放在精靈的右邊(看上面的示例精靈圖片)。用這種方式處理后，當你用CSS移動背景圖片時，不可能會有別的圖片會(錯誤的)顯示處理。

避免在CSS使用bottom或right定位

當定位CSS精靈中靠后的圖片時，使用類似background-position: bottom -300px; 或者 background-position: right -200px;的方式定位非常容易。最初，這一切都能正常工作，但是，一旦你的CSS精靈寬度或高度增加時，你剛才使用的定位方式就發(fā)現(xiàn)了錯誤，因為圖片相對右邊或者底邊的距離已經(jīng)發(fā)生了變化。所以，請使用left和top來定位。

為每張圖片留出足夠空隙

正如你所看到文章中提供的例子精靈圖片一樣，許多小圖片間都預(yù)留了很多空白。為什么不把圖片擠得緊湊點讓精靈圖片尺寸更小點呢？因為使用元素的地方可能包含各種不同的內(nèi)容，這些內(nèi)容會導致容器變寬變高，預(yù)留了足夠的空白的話，在容器大小發(fā)生變化時，可以避免其他的圖片顯示出來。

這有一個例子：

每個列表都使用一個數(shù)字圖片作為背景。看看上面的示例CSS精靈，你會發(fā)現(xiàn)這幾張圖片是交錯排列的，這樣處理后，不管怎么增加，其他的圖片都不會顯示出來。

不要擔心CSS精靈的尺寸大小

如果你有機會以標準的web設(shè)計來設(shè)計你的網(wǎng)站，那么你必定要將把很多圖片放到精靈圖片上，并且為這些圖片預(yù)覽出合適的空隙，這很好。精靈圖片中的空白空隙不會增加太多文件的體積，在addons.mozilla.org網(wǎng)站上使用的精靈圖片尺寸是1,000×2,000，但它僅16.7kb！

原文Url:http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

相關(guān)閱讀：http://www.alistapart.com/articles/sprites

總結(jié)

以上是生活随笔為你收集整理的css图片精灵定位_CSS精灵图片(CSS sprite)使用心得(转)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。