CSS Sprites技術的實際應用(圖)

　　css Sprites原理

　　CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景 圖片的位置。

　　CSS Sprites優點

　　利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因;

　　圖1

　　圖2

　　圖3

　　在公司項目對按鈕進行優化中得出一些經驗

　　1、按鈕圖片不能過大，色彩不能過于復雜，如果色彩過于豐富在合并圖片的時候會降低圖片的質量，背景變得很粗糙，如圖2這樣的圖片，我在優化按鈕的時候將其合并到背景圖上，就會使整個背景圖片質量降低;

　　2、相同樣式不同顏色的按鈕，放在同一行或者同一列中，便于在css中定位，這樣在css寫background-position的時候只要改動一個坐標就OK了;

　　3、使用ps這個工具的時候，標尺一定要看清楚，標度的值在標度的下面，我就因為這樣做了重復的勞動;

　　4、每一個系列的按鈕要留一部分的空間，方便以后進行擴展，新加一些按鈕或者改變一些按鈕;

　　5、因為之前很多html頁面里的按鈕使用了img這樣的標簽，在對按鈕優化的時候不得不大量地改動html里面的代碼，為此多了很多的工作量;所以我們一開始在寫頁面的時候盡量少用img標簽直接做按鈕，可以采用文字的形式，如“搜索”，放在a標簽之間，在css中定位a標簽的背景(背景是按鈕的圖片)來實現按鈕的效果，通過設置a標簽的text-indent:-999em，這樣在按鈕中就看不見文字了，如果背景不包含文字就不需要設置這個屬性了，通過設置font和color屬性來實現按鈕的文字效果;

　　6、圖3這種背景一般用在新聞列表中，實際應用的時候列表的行高往往比背景中的序號要大，所以在背景合并圖片中間距應該比一般按鈕要大些，這樣在頁面中就不會將多余的按鈕給顯示出來;

　　文章來源：http://www.cnblogs.com/huashengjam/archive/2009/08/25/1553404.html

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈