在網(wǎng)頁設(shè)計中，縮略圖是非常有用的，縮略圖可用于快速瀏覽或預(yù)覽內(nèi)容，同時可以改善頁面的加載速度。使用 CSS 中的

background-image

屬性可以非常容易地制作自定義縮略圖。

在 HTML 中，我們可以使用

<div>

元素來創(chuàng)建一個容器來包含我們的縮略圖，然后使用 CSS 中的

background-image

和其他屬性來定義樣式。

<div class="thumbnail"></div>

在 CSS 中，我們需要提供一個指向縮略圖的鏈接，并使用

background-image

屬性來指定圖片作為

<div>

的背景圖像。我們還可以使用其他 CSS 屬性來指定縮略圖的大小、對齊方式、顏色和其他視覺效果。

.thumbnail {
width: 100px;
height: 100px;
background-image: url("thumbnail.jpg");
background-size: cover;
background-position: center center;
}

在這個例子中，我們創(chuàng)建了一個名為 "thumbnail" 的類，并將它應(yīng)用于一個

<div>

元素。我們指定了縮略圖的寬度和高度，并將縮略圖文件 "thumbnail.jpg" 作為背景圖像。我們還使用了

background-size

和

background-position

屬性，來指定圖片的大小和位置。

總的來說，使用 Div 和 CSS 縮略圖是一個快速而靈活的創(chuàng)建縮略圖的方法，它可以幫助你縮短頁面加載時間，同時增強(qiáng)頁面的視覺吸引力。