在網(wǎng)頁(yè)開(kāi)發(fā)中，常需要使用小按鈕圖標(biāo)來(lái)增加頁(yè)面交互性和美觀性。而使用CSS實(shí)現(xiàn)小按鈕圖標(biāo)是一種簡(jiǎn)單而高效的方式。

.icon{
display: inline-block;
width: 20px;
height: 20px;
background: url(icon.png);
}
.icon-add{
background-position: 0 0;
}
.icon-delete{
background-position: -20px 0;
}
.icon-edit{
background-position: -40px 0;
}

以上代碼中，我們先定義了一個(gè).icon類，作為小按鈕圖標(biāo)的樣式基礎(chǔ)。通過(guò)設(shè)置display屬性為inline-block，我們將其轉(zhuǎn)化為行內(nèi)塊元素，便于在文本中使用。同時(shí)，通過(guò)設(shè)置width和height屬性，我們保證了圖標(biāo)大小的統(tǒng)一性。接著，我們通過(guò)background屬性設(shè)置了圖標(biāo)的背景圖片，這里的icon.png指的是包含多個(gè)圖標(biāo)的圖片。

在.icon類的基礎(chǔ)上，我們又分別定義了.icon-add、.icon-delete和.icon-edit類，用于具體指定不同的圖標(biāo)。通過(guò)使用background-position屬性，我們可以輕松地控制圖標(biāo)的位置。在這里，我們利用了css中background-position屬性的負(fù)值設(shè)置，使得不同圖標(biāo)在同一圖片上以不同偏移量的方式顯示。

最后，我們可以在html中使用以下標(biāo)簽來(lái)應(yīng)用這些小按鈕圖標(biāo)：

<span class="icon icon-add"></span>
<span class="icon icon-delete"></span>
<span class="icon icon-edit"></span>

通過(guò)為span標(biāo)簽添加對(duì)應(yīng)的圖標(biāo)類名，我們就可以輕松地實(shí)現(xiàn)各種小按鈕圖標(biāo)的應(yīng)用了。