CSS-精灵技术
精靈技術產生的背景
圖所示為網頁的請求原理圖，當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像都要經過一次請求才能展現給用戶。
然而，一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度。為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。
精靈技術本質
簡單地說，CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應用于網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來。通常情況下，這個由很多小的背景圖像合成的大圖被稱為精靈圖（雪碧圖），如下圖所示為京東網站中的一個精靈圖。
精靈技術的使用
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。
制作精靈圖
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。
大部分情況下，精靈圖都是網頁美工做。
精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。 精靈圖的寬度取決于最寬的那個背景。 可以橫向擺放也可以縱向擺放，但是每個圖片之間，間隔至少隔開偶數像素合適。 在精靈圖的最底端，留一片空隙，方便以后添加其他精靈圖。結束語： 小公司，背景圖片很少的情況，沒有必要使用精靈技術，維護成本太高。 如果是背景圖片比較多，可以建議使用精靈技術。
下圖所示就是淘寶網上應用的一個精靈圖：
?
圖：淘寶網中的精靈圖
精靈圖的使用也非常簡單，只需要借助 background 或者 background-position 屬性來定位背景圖像的位置即可。下面以上圖所示的精靈圖為例，來演示一下精靈圖的使用：
?運行結果如下：
?
圖：精靈圖演示?
注：
background-position:500px?15px；
背景圖片從容器(container)左上角的地方向右移500px,向下移15px，超出的部分隱藏。
background-position:-500px?-15px;
背景圖片從容器(container)左上角的地方向左移500px，向上移15px，超出的部分隱藏。
?
轉自：CSS——精靈技術 - 阿江是個程序猿 - 博客園
總結
- 上一篇： c++计算hash值
- 下一篇： CSS 基本样式