引言：

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

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

下面是一張精靈圖片

不要等你完成所有工作后再開(kāi)始使用CSS精靈

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

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

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

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

避免在CSS使用bottom或right定位

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

為每張圖片留出足夠空隙

正如你所看到文章中提供的例子精靈圖片一樣，許多小圖片間都預(yù)留了很多空白。為什么不把圖片擠得緊湊點(diǎn)讓精靈圖片尺寸更小點(diǎn)呢？因?yàn)槭褂迷氐牡胤娇赡馨鞣N不同的內(nèi)容，這些內(nèi)容會(huì)導(dǎo)致容器變寬變高，預(yù)留了足夠的空白的話，在容器大小發(fā)生變化時(shí)，可以避免其他的圖片顯示出來(lái)。

這有一個(gè)例子：

每個(gè)列表都使用一個(gè)數(shù)字圖片作為背景?？纯瓷厦娴氖纠鼵SS精靈，你會(huì)發(fā)現(xiàn)這幾張圖片是交錯(cuò)排列的，這樣處理后，不管怎么增加，其他的圖片都不會(huì)顯示出來(lái)。

不要擔(dān)心CSS精靈的尺寸大小

如果你有機(jī)會(huì)以標(biāo)準(zhǔn)的web設(shè)計(jì)來(lái)設(shè)計(jì)你的網(wǎng)站，那么你必定要將把很多圖片放到精靈圖片上，并且為這些圖片預(yù)覽出合適的空隙，這很好。精靈圖片中的空白空隙不會(huì)增加太多文件的體積，在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)使用心得(转)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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