這兩張圖片重合 CSS 是一種通過 CSS 控制多張圖片重疊顯示的技巧。通過給這些圖片設置不同的位置和深度，我們可以創建出生動、鮮明的效果。下面我們來詳細看一下如何使用 CSS 實現這種技巧。

/* 聲明一個樣式類用于控制圖片 */
.image {
position: absolute;
top: 0;
left: 0;
/* 添加深度，并使圖片被裁剪 */
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* 添加第一張圖片 */
.image--1 {
z-index: 1; /* 設置深度為1 */
background: url("image-1.jpg") no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
/* 添加第二張圖片 */
.image--2 {
z-index: 2; /* 設置深度為2 */
background: url("image-2.jpg") no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}

在上面的示例中，我們聲明了一個名為“image”的樣式類，用于控制兩張圖片的屬性。我們通過給“.image”添加“position: absolute”屬性，讓它脫離文檔流，并且可以通過“top”和“left”屬性設置其在頁面中的位置。

接下來，我們添加第一張圖片，需要將其深度設置為1，以便在配合下面重合的第二張圖片時看到其部分內容。對于第二張圖片，我們需要將其深度設置為2，以便在頁面中覆蓋第一張圖片。

最后，我們分別給這兩個圖片添加不同的背景和大小屬性，以便在頁面中正確顯示它們的內容。通過這種方式，我們可以很容易地控制兩張圖片在頁面中的樣式和位置，以及達到我們想要的獨特效果。