在網站設計中，圖片墻是一種絕佳的方式來展示圖片。為了提高用戶體驗，我們可以在圖片墻上添加計數功能。以下是使用CSS創建帶有計數功能的圖片墻的步驟。

.image-wall{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(200px, auto);
grid-gap: 10px;
counter-reset: image-counter;
}
.image{
position: relative;
overflow: hidden;
}
.image:before{
content: counter(image-counter);
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: white;
}
.image img{
width: 100%;
height: 100%;
object-fit: cover;
}
.image:hover{
transform: scale(1.05);
}
.image:hover:before{
text-shadow: 1px 1px black;
}

首先，我們創建一個帶有計數器的圖片墻的基本樣式。我們使用Grid布局來呈現圖片墻，并設置每個網格的最小大小為200px，以防止圖片變形。我們還使用counter-reset為每個圖像設置計數器。

然后，我們將每個圖像的位置設置為相對，為圖像前面添加計數器。

我們為計數器設置位置并為其設置字體大小和顏色。我們使用:hover偽類來放大圖像并更改計數器文本陰影。

最后，我們使用img元素自定義圖像大小，并使用object-fit: cover屬性來裁剪圖像以適應每個網格。

使用這些CSS代碼，您可以輕松創建一個帶有計數功能的漂亮圖片墻，提高用戶瀏覽圖片的體驗。