CSS Sprites ——雪碧圖的使用方法
首先解釋下CSS Sprites是什麽：有稱CSS精靈，有稱CSS雪碧的，無論叫什麽，他的作用就是把網頁上很多小圖標放到一張圖片裏面，然後通過CSS裏面的background-position來控制每個圖片的坐標，這樣不但減少http請求，而且還降低了圖片的大小，加快圖片的加載速度，對前端開發的朋友來說是必備技能。更詳細的解釋請到【百度百科】圍觀。
雪碧圖使用場景
1.靜態圖片，不隨用戶信息的變化而變化
2.小圖片，圖片容量比較小
3.加載量比較大
註：一些大圖片、有動態效果圖片無需使用雪碧圖
雪碧圖使用原理
1.使用CSS裏面的background-position屬性來控制背景圖的位置，從而在不同處顯示所需要的圖標。
2.
（上圖是慕課網教學視頻上的一張圖片，在此借用一下）如圖所示，將背景圖放在一個坐標系裏面，以左上角為起點。拼合背景圖的小圖（X，Y）為負值，比如想要展示圖中黑色邊框裏面的裙子時，只需：裙子：{background-position：-100px,0；}即可。因為“裙子”只有X軸偏移，沒有Y軸偏移。
雪碧圖實現方法
1.第一步：完成背景圖的拼合（把你所需要展示的小圖片整合到一張圖上面）
Photoshop手動拼圖：在PS裏完成所需的背景圖，量取每個小圖片的尺寸並記錄下來，將背景圖保存為png格式。
當項目或網站比較大時，用PS逐個量取可能不太現實。這時可以使用Sprites工具自動生成小圖片的坐標點。推薦一種Sprites工具自動生成工具——CSSGaga，是Windows系統下自動生成雪碧圖的一種工 具，具體使用還請看官網上自尋。下載地址：http://www.99css.com/archives/1524
2.下面是本人做的一個雪碧圖例子的代碼，看官可以復制去看下效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧圖</title>
</head>
<style>
h3,ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
li h3 {
font-size: 14px;
font-weight: 400px;
}
li {
display: block;
height: 40px;
line-height: 35px;
overflow: hidden;
/*border: 0.5px solid #dedede;*/
}
.LOGO {
width:160px;
background: #f8f8f8;
}
li i {
background: url(sprite.png);
display: inline;
width: 45px;
height: 35px;
float: left;
margin: 3px 10px 0 0;
}
.logo-1 i{
background-position: 0 0;
}
.logo-2 i{
background-position: 0 -35px;
}
.logo-3 i{
background-position: 0 -73px;
}
.logo-4 i{
background-position: -60px 3px;
}
.logo-5 i{
background-position: -60px -35px;
}
.logo-6 i{
background-position: -60px -108px;
}
.logo-7 i{
background-position: -60px -145px;
}
.logo-8 i{
background-position: -60px -185px;
}
</style>
<body>
<div class="LOGO">
<ul>
<li class="logo-1">
<i></i>
<h3>服裝內衣</h3>
</li>
<li class="logo-2">
<i></i>
<h3>鞋包配飾</h3>
</li>
<li class="logo-3">
<i></i>
<h3>運動戶外</h3>
</li>
<li class="logo-4">
<i></i>
<h3>居家飾品</h3>
</li>
<li class="logo-5">
<i></i>
<h3>居家家具</h3>
</li>
<li class="logo-6">
<i></i>
<h3>愛上喝水</h3>
</li>
<li class="logo-7">
<i></i>
<h3>私家車</h3>
</li>
<li class="logo-8">
<i></i>
<h3>樂器類</h3>
</li>
</ul>
</div>
</body>
</html>
3.所用圖片
看官需要將改圖轉化為png格式。（background-position屬性的數值可以根據需求自行調整）
該文章為個人編寫，如有錯誤之處，還請看官諒解！
CSS Sprites ——雪碧圖的使用方法