一、把小圖放在一張大圖中，先排版好。上幾張圖看看，就比如這個：
谷歌：
淘寶：
土豆右下角懸浮框：
1、把用到的小圖都放到了一張大圖里，其中的小圖之間的排版是有點規律的，比如說淘寶那張，類似的小圖放置成同一列，這樣就計算小圖顯示位置的時候，只要知道第一個小圖的位置，同一列的小圖，left（X坐標）一樣，只需要改top（Y坐標）。這樣就方便了許多。
二、使用大圖。
在哪個位置需要使用這個小圖，就把大圖作為background-images插入。然后來根據這個小圖的大小調整left 和top。
用到的css屬性是background-image、background-position、background-repeat、這幾個屬性。
或者使用background這個復合屬性寫在一起就好。
三、我的第一個demo，我一定要實現這樣的效果
我先上張圖說明我要做什么:
這個例子的意義是讓我明白要怎么去顯示想要的小圖，沒有其他的意義了哈哈。
我的思路是，ul li內內嵌一個<div></div>（當然li是塊級元素）。
詳細的布局代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> ul.ul1 { width:200px; height:200px; } ul.ul1 li { height:40px; } .star { width:30px; height:18px; border:1px solid black; display:inline-block; /*將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞*/ /*這里使用是為了div跟li能不使用float屬性處在同一行，最后div和li對其是用到inline-block屬性*/ vertical-align:top; background-image:url(images/minibar.png); /*顯示小圖*/ background-repeat:none; background-position:2px -55px; } .num9 { width:30px; height:18px; border:1px solid black; display:inline-block; vertical-align:top; background-image:url(images/minibar.png); /*顯示小圖*/ background-repeat:none; background-position:-205px -20px; } </style> </head> <body> <ul class="ul1"> <li>項目一<div class="star"></div></li> <li>項目一<div class="num9"></div></li> <li>項目一</li> <li>項目一</li> </ul> </body> </html>
小圖完整出來了。
心得：
1、書寫background-position時一般都是負值，因為是從大圖的左上角作為（0,0）點。
2、之前沒有學習css sprite之前，是想着怎么把一張大圖不要的部分怎么遮擋掉。現在明白了是怎么回事。比如我上面要顯示那朵小雲，把大圖放進div中，然后設置這個div的width和height，再定位一下background-position的位置。最后，大圖就只在div中顯示我們需要的一小部分。
3、我還要深入學習要怎么把小圖排版好成一個大圖，更容易測量位置，且不互相干擾。
三、為什么要使用CSS Sprites
減少HTTP請求次數，從而提高了網站性能。
因為假設有6個小圖，就有6個HTTP請求，但是如果是放在一個大圖里，就只需要1次，因為你要的6個小圖都在一張大圖里，請求一次后不用再次發送HTTP請求去請求圖片資源。