HTML5精靈圖片是Web開發(fā)中常用的一種技術(shù)，它能夠?qū)⒍鄰埿D片合并成一張大圖片，并通過CSS樣式表的background-position屬性來實(shí)現(xiàn)不同的顯示效果。以下是一個HTML5精靈圖片的代碼示例：

.icon {
display: inline-block;
width: 20px;
height: 20px;
background: url(sprite.png) no-repeat;
}
.home {
background-position: 0px 0px;
}
.contact {
background-position: -20px 0px;
}
.about {
background-position: -40px 0px;
}

上述代碼定義了一個名為“icon”的CSS類，利用background屬性將樣式綁定到精靈圖片“sprite.png”上。而“home”，“contact”，“about”是類名，通過background-position屬性指定了不同位置上的背景圖像。

通過使用HTML5精靈圖片技術(shù)，我們可以節(jié)省服務(wù)器請求次數(shù)，提高網(wǎng)站性能，減輕服務(wù)器壓力，同時給用戶呈現(xiàn)更出色的體驗(yàn)。