當(dāng)我們需要在網(wǎng)頁中使用精靈圖時，難免會遇到需要放大圖標(biāo)的情況。這時就需要使用css來對精靈圖進(jìn)行放大操作。
/* 定義精靈圖中每個圖標(biāo)的樣式 */
.icon {
width: 18px;
height: 18px;
background-image: url(sprite.png);
background-repeat: no-repeat;
}
/* 定義放大后的樣式 */
.icon-large {
width: 32px;
height: 32px;
background-size: 288px 18px; /* 將精靈圖的寬度擴(kuò)大為6倍，高度不變 */
}
/* 在html中使用放大后的樣式 */
<div class="icon icon-large" style="background-position: -144px 0;">代碼中首先定義了精靈圖中每個圖標(biāo)的樣式，然后定義了放大后的樣式并將寬度擴(kuò)大為6倍(即原來的寬度乘以放大倍數(shù))，高度保持不變。在html中，使用放大后的樣式并通過background-position來調(diào)整顯示的圖標(biāo)位置。
通過這樣的方式，我們就能輕松實現(xiàn)對精靈圖中圖標(biāo)的放大效果。