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

/* 聲明一個(gè)樣式類用于控制圖片 */
.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; /* 設(shè)置深度為1 */
background: url("image-1.jpg") no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
/* 添加第二張圖片 */
.image--2 {
z-index: 2; /* 設(shè)置深度為2 */
background: url("image-2.jpg") no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}

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

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

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