介紹與原理
??CSS-Sprite 為將多張圖片(一般為小的圖標(biāo))拼合在一張大的圖片中(可以通過減少http請求數(shù)來加快網(wǎng)頁的加載速度)，通過每一個小塊元素的 background-position 來定位其中的每一小張圖片。
圖 1
??如圖1所示
backgound-image 的左上頂點可以是為原點，x 和 y 軸以負(fù)方向來選擇圖片的起始顯示位置，通過設(shè)定 backgorund-position 屬性來實現(xiàn)( background-image 的默認(rèn)起始顯示位置為 backgorund-position: 0px 0px )。??
Actor1.png
??對于Actor1.png(來自RPGVXace)，其中的每小塊圖片的長和寬都為96px,于是顯示這些圖片的元素的
height 和 width 即可設(shè)為 96px ，根據(jù)圖1，選擇第一行第一列的塊圖即可為該元素設(shè)置 backgorund-position: 0px 0px ，選擇第一行第二列的塊圖即可為該元素設(shè)置 backgorund-position: -96px 0px ，選擇第二行第一列的塊圖即可為該元素設(shè)置 backgorund-position: 0px -96px ，以此類推。??
??
實現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS-Sprite</title>
<style>
li {
width: 96px;
height: 96px;
display: inline-block;
border: 1px solid yellowgreen;
background-image: url('Actor1.png');
background-repeat: no-repeat;
overflow: hidden;
}
.face1{
background-position: 0px 0px;
}
.face2{
background-position: -96px 0px;
}
.face3{
background-position: -192px 0px;
}
.face4{
background-position: -288px 0px;
}
.face5{
background-position: 0px -96px;
}
.face6{
background-position: -96px -96px;
}
.face7{
background-position: -192px -96px;
}
.face8{
background-position: -288px -96px;
}
</style>
</head>
<body>
<ul>
<li class="face1"></li>
<li class="face2"></li>
<li class="face3"></li>
<li class="face4"></li>
<li class="face5"></li>
<li class="face6"></li>
<li class="face7"></li>
<li class="face8"></li>
</ul>
</body>
</html>
??于是，可以得到代碼如上所示。
??
??
