在前端開發中，小圖標是非常常見的元素。為了減少HTTP請求，我們往往會將小圖標合并到一張較大的圖片中，然后使用CSS進行截取并顯示。下面就來介紹如何使用CSS截取小圖標。

首先，我們需要準備一張合并了多個小圖標的大圖，比如下面這張：

.icon {
background-image: url(icon.png);
}

我們將這張大圖設置為某個元素的背景圖片。接下來，我們就要使用CSS來截取其中的小圖標了。在CSS中，我們可以使用background-position屬性來控制背景圖片的位置。

例如，如果我們想要截取第一個小圖標，可以使用如下的代碼：

.icon {
background-position: 0 0;
width: 16px;
height: 16px;
}

這里的0 0表示背景圖片的左上角，也就是第一個小圖標的位置。width和height屬性則用來設置元素的寬度和高度，使得只顯示截取的小圖標。

如果我們想要截取第二個小圖標，可以將background-position設置為0 -16px，以此類推。如果小圖標的尺寸不一致，我們還需要根據實際情況調整width和height屬性。

總的來說，使用CSS截取小圖標是一種非常便捷的方式，能夠提高網頁的性能并減少HTTP請求。希望本文能夠幫到大家，謝謝閱讀！