PS是廣大設(shè)計(jì)師們?nèi)粘１貍涞墓ぞ咧唬梢暂p松制作出精美的圖片素材。在網(wǎng)頁(yè)開(kāi)發(fā)中，經(jīng)常會(huì)用到精靈圖以?xún)?yōu)化網(wǎng)頁(yè)加載速度，讓我們來(lái)學(xué)習(xí)如何利用PS制作精靈圖并將其應(yīng)用到CSS中吧。

首先，我們需要準(zhǔn)備好要制作的圖標(biāo)或圖片素材，并使用PS將它們合并到一張大圖上，注意各個(gè)素材之間的間距。

<style>
.icon{ /*為圖標(biāo)設(shè)置公共樣式*/
display: inline-block;
width: 24px;
height: 24px;
background-image: url(icon.png);
}
.icon1{ /*給不同的圖標(biāo)設(shè)置不同的背景位置偏移量*/
background-position: 0 0;
}
.icon2{
background-position: -24px 0;
}
.icon3{
background-position: -48px 0;
}
</style>
<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

最后，我們只需要在CSS中定義每個(gè)圖標(biāo)的背景位置偏移量，就可以將大圖中的每個(gè)素材單獨(dú)顯示出來(lái)。通過(guò)使用精靈圖，可以減少網(wǎng)頁(yè)請(qǐng)求，有效提升網(wǎng)頁(yè)訪問(wèn)速度，同時(shí)也能更好地組織網(wǎng)頁(yè)結(jié)構(gòu)。