CSS精靈技術(shù)是前端開發(fā)中的一項(xiàng)重要技術(shù)，它可以減少網(wǎng)頁的加載時(shí)間和網(wǎng)絡(luò)請求次數(shù)。該技術(shù)將多張小圖片合并為一張大圖，并用CSS中的background、background-position屬性控制顯示相應(yīng)圖片。

以下是CSS精靈技術(shù)的格式：

/*定義要使用精靈的元素*/
.icon {
/*指定顯示精靈的背景圖*/
background: url(sprite.png);
/*指定顯示背景圖的位置*/
background-position: -18px -32px;
/*指定精靈圖片在背景圖中的大小*/
width: 16px;
height: 16px;
}
/*精靈圖片在背景圖中的位置*/
.facebook {
background-position: 0 0;
}
.twitter {
background-position: -18px 0;
}
.wechat {
background-position: 0 -18px;
}
.qq {
background-position: -18px -18px;
}

以上代碼中，定義了一個(gè).icon元素，通過指定其background屬性為精靈圖sprite.png的路徑，并通過background-position屬性來指定sprite.png中要顯示的圖片位置。該元素還指定了精靈圖片在sprite.png中的大小。

接下來的四個(gè)樣式，定義了各自代表的媒體圖標(biāo)在sprite.png中的位置，通過為相應(yīng)元素添加該樣式，就可以顯示出相應(yīng)的媒體圖標(biāo)。