小圖平鋪是網(wǎng)頁(yè)設(shè)計(jì)中常見的技巧之一，特別是在一些背景樣式、按鈕及圖標(biāo)的設(shè)計(jì)中。“小圖”的含義是指一些寬度和高度比較小的圖像，例如一些按鈕背景、箭頭圖標(biāo)等等。接下來(lái)我們將介紹如何使用 CSS 實(shí)現(xiàn)小圖平鋪的效果。

我們首先需要將需要平鋪的小圖準(zhǔn)備好，然后添加如下的 CSS 樣式。

.tile {
width: 100px;
height: 100px;
background-image: url('tiles.png');
background-repeat: repeat;
}

代碼解釋:

首先定義一個(gè) CSS 類名為 tile，然后設(shè)置該元素的寬和高分別為 100px。接著，我們將圖像的 URL 賦值給了 background-image 屬性，這里的 tiles.png 表示我們提前準(zhǔn)備好的圖片。最后，使用 background-repeat 屬性將該圖片設(shè)置為平鋪模式。

如果將 code 屬性的值設(shè)為 no-wrap，可以禁止代碼被換行：

.tile {
width: 100px;
height: 100px;
background-image: url('tiles.png');
background-repeat: repeat;
}

運(yùn)行效果如下所示：

可以看到，我們成功地實(shí)現(xiàn)了小圖平鋪的效果，重疊的多個(gè)小圖拼接在一起成為一整個(gè)大圖，讓網(wǎng)頁(yè)元素看上去更加美觀和精致。