CSS實現照片重疊的效果可以讓網頁看起來更生動、美觀。接下來，我們來學習如何使用CSS實現照片重疊效果：

/* 首先，讓我們設置照片容器的樣式 */
.photo-container {
position: relative; /* 設置為相對定位，為下面絕對定位的圖片做準備 */
width: 300px;
height: 200px;
}
/* 接著，我們設置要重疊的圖片的樣式 */
.overlay-img {
position: absolute; /* 設置為絕對定位，以便于控制其位置 */
top: 50px;
left: 50px;
opacity: 0.7; /* 降低透明度，達到重疊效果 */
z-index: 1; /* 設置一個比默認值更高的層級，以便于它覆蓋其他元素（默認層級為0） */
}

在上面的代碼中，我們創建了一個名為.photo-container的元素，將其設置為相對定位，也就是說它內部的元素可以使用絕對定位來定位它們自己。接著我們創建了名為.overlay-img的元素，將其設置為絕對定位，并設置了它的位置、透明度和層級。

最后，我們只需要將.overlay-img元素添加到.photo-container中，就可以實現照片重疊效果了。利用CSS的層疊順序，我們可以在需要的時候控制哪個元素應該顯示在前面。