在網頁設計中，圖片墻是一種非常流行的網頁元素，它可以在有限的空間內展示大量的圖片。利用CSS，我們可以輕松地實現一組漂亮的圖片墻。下面是一些CSS技巧，可以讓你創建一個吸引人的圖片墻。

/* 設置網格布局 */
.display {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
/* 禁止圖片超出父容器 */
.display img {
max-width: 100%;
height: auto;
}
/* 設置鼠標懸停效果 */
.display img:hover {
opacity: 0.7;
}
/* 添加過渡效果 */
.display img {
transition: opacity 0.4s ease-in-out;
}
/* 調整圖片位置 */
.display img:nth-child(4n-3) {
grid-row: span 2;
}
/* 調整圖片大小 */
.display img:nth-child(6n-5) {
grid-row: span 2;
grid-column: span 2;
}
/* 調整圖片間距 */
@media screen and (max-width: 750px) {
.display {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 10px;
}
}

代碼中的display類使用網格布局來排列圖片，每一列的寬度為250像素，并在元素之間加入20像素的間隔。在img標簽中，我們使用max-width: 100%;來防止圖片溢出，同時設置了一個鼠標懸停效果和過渡效果。在類名為display中，我們使用了兩個偽類來調整圖片的大小和位置，使圖片墻更加美觀。最后，在媒體查詢中，我們設置了屏幕寬度小于750像素時，將圖片大小和間距適當減小，以適應移動設備。