css中精靈圖是什么意思？
css精靈圖(sprite)直譯為“CSS精靈”，也被稱為通常被解釋為“CSS圖像拼合”、“CSS貼圖定位”或“CSS圖片精靈”、“CSS雪碧圖”，是一種網頁圖片應用處理方式。
其實就是把一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
怎么使用css精靈圖(sprite)？
css精靈圖(sprite)其實就是通過將多個圖片融合到一張圖片文件中，使用CSS background和background-position屬性渲染，這也就意味着你的標簽變得更加復雜了，圖片是在CSS中定義，而非標簽。
在需要用到圖片的時候，現階段是通過CSS屬性background-image組合background-repeat, background-position等來實現圖片的顯示。
使用精靈圖的優點
1、減少加載網頁圖片時對服務器的請求次數
可以合並多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
2、提高頁面的加載速度
sprite 技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。
單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
3、減少鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。
目的：
為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度
本質：
CSS精靈圖是一種處理網頁背景圖像的方式，它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來
.content{
width: 1000px;
margin: 0 auto;
}
.content h1{
color: #de4767;
text-align: center;
font-size: 44px;
font-weight: normal;/* 不加粗，字體變正常 */
}
.content ul{
padding-left: 0px;
text-align: center;
}
.content ul li{
display: inline-block;/* ul在一行 用浮動（float: ;）副元素會坍塌 */
height: 30px;
width: 80px;
background-image: url(../img/img/buyer/mod_circle.png);
background-position: center 5px;/* 顯示哪一塊區域 */
background-repeat: no-repeat;/* 背景圖片不重復 */
}
.content ul li:hover{
background-position: center -95px;/* 切換圖片 */
}
.content ul li a{
padding-top: 40px;
display: block;/* a標簽是行內標簽 display: block;是能讓a標簽設置寬高 */
text-decoration: none;
color: #333;
}
.content ul li a:hover{
color: #DE4767;
}