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

CSS Sprites優(yōu)點(diǎn)
利用CSS Sprites能很好地減少了網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高了頁(yè)面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；


圖1


圖2


圖３
在公司項(xiàng)目對(duì)按鈕進(jìn)行優(yōu)化中得出一些經(jīng)驗(yàn)
1、按鈕圖片不能過(guò)大，色彩不能過(guò)于復(fù)雜，如果色彩過(guò)于豐富在合并圖片的時(shí)候會(huì)降低圖片的質(zhì)量，背景變得很粗糙，如圖2這樣的圖片，我在優(yōu)化按鈕的時(shí)候?qū)⑵浜喜⒌奖尘皥D上，就會(huì)使整個(gè)背景圖片質(zhì)量降低；

2、相同樣式不同顏色的按鈕，放在同一行或者同一列中，便于在css中定位，這樣在css寫(xiě)background-position的時(shí)候只要改動(dòng)一個(gè)坐標(biāo)就OK了；

3、使用ps這個(gè)工具的時(shí)候，標(biāo)尺一定要看清楚，標(biāo)度的值在標(biāo)度的下面，我就因?yàn)檫@樣做了重復(fù)的勞動(dòng)；

4、每一個(gè)系列的按鈕要留一部分的空間，方便以后進(jìn)行擴(kuò)展，新加一些按鈕或者改變一些按鈕；

5、因?yàn)橹昂芏鄅tml頁(yè)面里的按鈕使用了img這樣的標(biāo)簽，在對(duì)按鈕優(yōu)化的時(shí)候不得不大量地改動(dòng)html里面的代碼，為此多了很多的工作量；所以我們一開(kāi)始在寫(xiě)頁(yè)面的時(shí)候盡量少用img標(biāo)簽直接做按鈕，可以采用文字的形式，如“搜索”，放在a標(biāo)簽之間，在css中定位a標(biāo)簽的背景（背景是按鈕的圖片）來(lái)實(shí)現(xiàn)按鈕的效果，通過(guò)設(shè)置a標(biāo)簽的text-indent:-999em，這樣在按鈕中就看不見(jiàn)文字了，如果背景不包含文字就不需要設(shè)置這個(gè)屬性了，通過(guò)設(shè)置font和color屬性來(lái)實(shí)現(xiàn)按鈕的文字效果；

６、圖3這種背景一般用在新聞列表中，實(shí)際應(yīng)用的時(shí)候列表的行高往往比背景中的序號(hào)要大，所以在背景合并圖片中間距應(yīng)該比一般按鈕要大些，這樣在頁(yè)面中就不會(huì)將多余的按鈕給顯示出來(lái)；

以上是我在對(duì)按鈕圖片進(jìn)行優(yōu)化整合的時(shí)候的一點(diǎn)體會(huì)！如果有些不足或者需要補(bǔ)充的地方請(qǐng)留言！

• css