CSS Sprite雪碧圖
- 靜態圖片，不隨用戶信息的變化而變化
- 小圖片，圖片容量比較小（3k - 5k）
- 加載量比較大 大圖不建議拼成雪碧圖
![在這裏插入圖片描述]()
基本目的：有效的減少http請求數量，加速內容顯示（因爲每請求一次，就會和服務器鏈接一次，建立鏈接是需要額外時間的）
實現原理： 基於CSS background-position屬性控制 通常來講，設置一個區域的背景圖，然後來控制背景圖位置實現功能
我們可以通過座標系來看（更加清晰）：
![在這裏插入圖片描述]()
控制一個層，可顯示的區域範圍大小，通過一個窗口，進行背景圖滑動
實現方式：
1.PS手動拼圖
2.使用sprite工具自動生成 -->CssGaga、Css Sprite Tools
工具使用步驟
①、用ps把小圖片切好
②、打開軟件
③、打開圖片
點擊左上角的“選擇多幅小背景圖片”，選擇多張圖片，點擊打開
④、排布圖片
可以選擇上面的最上面按鈕今天橫豎的默認排布，也可以鼠標選中圖片拖動位置，拖動完成後程序會根據內部圖片的位置生成面積最小的雪碧圖，當然也會改變相應的圖片位置
⑤、代碼生成
點擊“選擇目錄並生成測試文件”按鈕
所需要的代碼就在css/bgs.css文件裏面
所需要的圖片在imgs裏
例如：
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<style>
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
margin: 0;
padding: 0;
}
h3 {
display: block;
margin: 0;
padding: 0;
}
.cat {
position: relative;
width: 150px;
background: #f8f8f8;
border: 1px solid #bbb;
}
ol, ul {
list-style: none;
}
li {
z-index: 2;
position: relative;
display: block;
height: 31px;
line-height: 31px;
overflow: hidden;
margin: 1px 10px 0;
vertical-align: bottom;
border-bottom: 1px solid #dedede
}
li h3 {
font-size: 14px;
font-weight: 400;
}
li i {
background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
/* 注意url使用自己的路徑*/
display: inline;
float: left;
margin: 3px 10px 0 0;
height: 24px;
width: 30px
}
</style>
</head>
<body>
<div class="cat">
<ul >
<li>
<i></i>
<h3>服裝內衣</h3>
</li>
<li class="cat-2">
<i></i>
<h3>鞋包配飾</h3>
</li>
<li class="cat-3">
<i></i>
<h3>運動戶外</h3>
</li>
<li class="cat-4">
<i></i>
<h3>珠寶手錶</h3>
</li>
<li class="cat-5">
<i></i>
<h3>手機數碼</h3>
</li>
<li class="cat-6">
<i></i>
<h3>家電辦公</h3>
</li>
<li class="cat-7">
<i></i>
<h3>護膚彩妝</h3>
</li>
<li class="cat-8">
<i></i>
<h3>母嬰用品</h3>
</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<style>
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul
{
margin: 0;
padding: 0;
}
h3 {
display: block;
margin: 0;
padding: 0;
}
.cat {
position: relative;
width: 150px;
background: #f8f8f8;
border: 1px solid #bbb;
}
ol, ul {
list-style: none;
}
li {
z-index: 2;
position: relative;
display: block;
height: 31px;
line-height: 31px;
overflow: hidden;
margin: 1px 10px 0;
vertical-align: bottom;
border-bottom: 1px solid #dedede
}
li h3 {
font-size: 14px;
font-weight: 400;
}
li i {
background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
display: inline;
float: left;
margin: 3px 10px 0 0;
height: 24px;
width: 30px
}
.cat-1 i{
background-position: 0 0;
}
.cat-2 i{
background-position: 0 -24px;
}
.cat-3 i{
background-position: 0 -48px;
}
.cat-4 i{
background-position: 0 -72px;
}
.cat-5 i{
background-position: 0 -96px;
}
.cat-6 i{
background-position: 0 -120px;
}
.cat-7 i{
background-position: 0 -144px;
}
.cat-8 i{
background-position: 0 -168px;
}
.cat-9 i{
background-position: 0 -192px;
}
</style>
</head>
<body>
<div class="cat">
<ul >
<li>
<i></i>
<h3>服裝內衣</h3>
</li>
<li class="cat-2">
<i></i>
<h3>鞋包配飾</h3>
</li>
<li class="cat-3">
<i></i>
<h3>運動戶外</h3>
</li>
<li class="cat-4">
<i></i>
<h3>珠寶手錶</h3>
</li>
<li class="cat-5">
<i></i>
<h3>手機數碼</h3>
</li>
<li class="cat-6">
<i></i>
<h3>家電辦公</h3>
</li>
<li class="cat-7">
<i></i>
<h3>護膚彩妝</h3>
</li>
<li class="cat-8">
<i></i>
<h3>母嬰用品</h3>
</li>
</ul>
</div>
</body>
</html>
