一、雪碧圖的原理
CSS Sprites 因其英文被稱為雪碧圖梗逮。
主要用于把一堆小圖標整合在一張背景透明的大圖上骇钦，通過設(shè)置對應(yīng)的位置來顯示不同的圖片所禀，目的是大幅減輕服務(wù)器對圖片的請求數(shù)量蛹屿，是前端性能優(yōu)化的一種方式屁奏。
雪碧圖示例.png
優(yōu)勢
1、減少網(wǎng)頁的HTTP請求错负，提高頁面性能
2坟瓢、減少圖片命名的困擾
劣勢
1、需要計算每個圖片的位置
2犹撒、后期維護困難
二折联、雪碧圖的實現(xiàn)
通過設(shè)置每個<i></i>對應(yīng)的background-position來展現(xiàn)不同位置的圖標。
其中第一個參數(shù)代表x軸控制左右识颊，第二個參數(shù)代表y軸控制上下诚镰。
默認情況下為
background-position: 0% 0%;
image.png
當(dāng)設(shè)置x為負數(shù)，相當(dāng)于固定展現(xiàn)框不動祥款，圖片向左側(cè)移動清笨，展現(xiàn)的是相對右側(cè)的內(nèi)容。同理當(dāng)y為負數(shù)镰踏，圖片向上側(cè)移動函筋，展現(xiàn)的是相對下方的內(nèi)容。
image.png
<!DOCTYPE html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>測試頁面</title>
<style>
.item-list {
border: 1px solid #333;
padding: 0;
width: 200px;
background-color: #f8f8f8;
}
.item-list li {
list-style: none;
width: 160px;
height: 40px;
margin: 0 20px;
border-bottom: 1px solid #dedede;
line-height: 40px;
}
li i {
background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');
width: 30px;
height: 24px;
display: inline-block;
vertical-align: middle;
}
.p1 i {
background-position: -40px 0px;
}
.p2 i {
background-position: 0px -24px;
}
.p3 i {
background-position: 0px -48px;
}
.p4 i {
background-position: 0px -72px;
}
.p5 i {
background-position: -40px -72px;
}
.p6 i {
background-position: -40px -48px;
}
.p7 i {
background-position: 0px 0px;
}
</style>
</head>
<body>
<div style="height:400px;">
<div style="width:600px;height:100%;margin-left:300px;">
<ul class="item-list">
<li class="p1"><i></i>商品A</li>
<li class="p2"><i></i>商品B</li>
<li class="p3"><i></i>商品C</li>
<li class="p4"><i></i>商品D</li>
<li class="p5"><i></i>商品E</li>
<li class="p6"><i></i>商品F</li>
<li class="p7"><i></i>商品G</li>
</ul>
</div>
</div>
<script src="js/jquery.min.js"></script>
</body>
</html>
HTML結(jié)果.png
