雪碧圖CSS Sprite的應(yīng)用
CSS雪碧，即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來(lái)顯示需要顯示的圖片部分。例如常見(jiàn)的商品分類(lèi)導(dǎo)航其實(shí)所有商品的背景圖用的都是一個(gè)所有小圖標(biāo)拼湊成的大圖，只是在不同類(lèi)別顯示對(duì)應(yīng)類(lèi)別的圖標(biāo)時(shí)，通過(guò)li背景定位到大圖的對(duì)應(yīng)圖標(biāo)的位置。背景圖位置可以使用一些雪碧圖生成工具的時(shí)候，生成對(duì)應(yīng)的CSS樣式文件里面會(huì)有對(duì)應(yīng)的位置信息。
好處優(yōu)點(diǎn)
有效減少網(wǎng)站的http請(qǐng)求數(shù)量，加速圖片的顯示。
條件
靜態(tài)圖片，圖片不隨用戶(hù)信息的變化而變化。
小圖片，容量比較小的(2-3KB)
圖片加載量比較大的。
注意：大圖片不建議用雪碧圖咯，圖片那么大，拼完之后豈不是拆機(jī)無(wú)敵大咯，加載就慢了，得不償失?。?！
原理
利用 css3的 background-position控制一個(gè)層可顯示區(qū)域范圍大小，通過(guò)一個(gè)窗口，對(duì)背景圖進(jìn)行滑動(dòng)。簡(jiǎn)單來(lái)說(shuō)，就是利用這個(gè)屬性，設(shè)置背景圖需要顯示的起始位置，在通過(guò)標(biāo)簽來(lái)控制背景圖顯示的范圍。
background-position屬性
根據(jù)圖所知：
以左上角為（0,0）坐標(biāo)
x,y都是負(fù)值
綜上所訴，所以background-position的取值就是背景圖顯示的起始坐標(biāo)，形式就是background-position：0, 0;
拼圖
拼圖可以用ps，或者網(wǎng)上很多在線(xiàn)雪碧圖生成工具，可以利用這些去生成雪碧圖。
其實(shí)最好的拼圖就是每個(gè)圖標(biāo)邊距是多少和圖標(biāo)周?chē)牧舭琢舳嗌俣伎刂坪茫瑢?duì)css的background-position的坐標(biāo)寫(xiě)起來(lái)有規(guī)律的話(huà)，好些很多（然而這個(gè)是我自己手動(dòng)拖拉的，位置很沒(méi)有規(guī)律，所以下面的坐標(biāo)值都是調(diào)試過(guò)才取值的）
講完這些了，可以來(lái)正題了，html和css代碼了，下面代碼是模仿生成一個(gè)菜單~~~
代碼
<div id="content">
<ul class="content">
<li class="cat-1">
<i></i>
<h3>女裝/男裝/內(nèi)衣</h3>
</li>
<li class="cat-2">
<i></i>
<h3>鞋靴/箱包/配件</h3>
</li>
<li class="cat-3">
<i></i>
<h3>童裝玩具/孕產(chǎn)/用品</h3>
</li>
<li class="cat-4">
<i></i>
<h3>家電/數(shù)碼/手機(jī)</h3>
</li>
<li class="cat-5">
<i></i>
<h3>美妝/洗護(hù)/保健品</h3>
</li>
<li class="cat-6">
<i></i>
<h3>珠寶/眼鏡/手表</h3>
</li>
<li class="cat-7">
<i></i>
<h3>運(yùn)動(dòng)/戶(hù)外/樂(lè)器</h3>
</li>
<li class="cat-8">
<i></i>
<h3>游戲/動(dòng)漫/影視</h3>
</li>
<li class="cat-9">
<i></i>
<h3>美食/生鮮/零食</h3>
</li>
<li class="cat-10">
<i></i>
<h3>鮮花/寵物/農(nóng)資</h3>
</li>
<li class="cat-11">
<i></i>
<h3>房產(chǎn)/裝修/建材</h3>
</li>
</ul>
</div>
#content{
width: 180px;
background: #f8f8f8;
border: 1px solid #bbb;
}
h3{
margin: 0;
padding: 0;
}
ul{
list-style: none;
padding: 0;
}
li h3{
font-size: 14px;
font-weight: 400;
}
li{
margin: 3px 10px 0 0;
display: block;
height: 31px;
line-height: 31px;
overflow: hidden;
border-bottom: 1px solid #dedede;
}
li i{
background: url(sprite.png);
display: inline;
width: 40px;
height: 28px;
float: left;
}
.cat-1 i{
background-position: -7px -5px;
}
.cat-2 i{
background-position: -2px -35px;
}
.cat-3 i{
background-position: -7px -65px;
}
.cat-4 i{
background-position: -7px -105px;
}
.cat-5 i{
background-position: -7px -129px;
}
.cat-6 i{
background-position: -7px -151px;
}
.cat-7 i{
background-position:-60px -4px;
}
.cat-8 i{
background-position:-56px -33px;
}
.cat-9 i{
background-position: -56px -66px;
}
.cat-10 i{
background-position:-60px -103px;
}
.cat-11 i{
background-position: -51px -128px;
}
效果圖如下
本文轉(zhuǎn)載自 憶桐之家的博客，《雪碧圖CSS Sprite的應(yīng)用》