在網頁開發中，有時候需要將一張大圖切割成多個小圖，并在不同的地方使用這些小圖，實現更好的頁面效果。使用CSS可以很容易地實現這一需求。

我們先來看一下如何將一張圖片切成多張小圖。可以使用photoshop或其他工具先將圖片切割成需要的小圖，然后將這些小圖按照順序排成一張大圖。在CSS中，通過指定元素的寬度和高度，以及background-image和background-position屬性，可以很容易地將這張大圖分割成多個小圖并進行使用。

.icon {
width: 30px;
height: 30px;
background-image: url("sprite.png");
background-position: -20px -40px;
}

上面的代碼中，.icon是一個CSS選擇器，將應用樣式到class為icon的元素上。這個元素的寬度和高度都是30px，背景圖片使用了名為sprite.png的圖片，-20px -40px指定背景圖片在元素中的位置。

當然，如果想要切割的小圖比較多，可以將他們按照一定的規律排列在大圖中，然后使用CSS中的偽元素（psuedo-element）和:after/:before選擇器來使用這些小圖片。

.btn {
width: 100px;
height: 50px;
background-image: url("btn-sprites.png");
background-position: 0px 0px;
position: relative;
}
.btn:after {
content: "";
display: block;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 50px;
background-image: url("btn-sprites.png");
background-position: -50px 0px;
}

上面的代碼中，.btn元素是一個帶有背景圖的元素，寬度和高度分別為100px和50px。在這個元素的后面使用了:after偽元素，將寬度和高度設置為50px，并指定了它的背景圖和位置。使用position屬性可以將這個偽元素定位到.btn元素的右邊，從而實現兩個小圖并排使用的效果。

總之，使用CSS可以很方便地將一張大圖切割成多個小圖，并在網頁中使用這些小圖。這種技術可以減少圖片的下載數量和提高網頁加載速度，同時也可以實現更加美觀的頁面效果。