在網頁設計中，為了使頁面更具美觀性和吸引力，經常會采用將圖片貼在另一張圖片上的效果。本文將介紹如何使用CSS對圖片進行疊加處理，使得圖片更具豐富性。

.overlay-image{
position: relative;
display: inline-block;
}
.overlay-image img{
display: block;
}
.overlay-image::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("overlay.png");
background-size: cover;
opacity: 0.6;
z-index: 1;
}

以上代碼實現了一個圖片在另一張圖片上疊加的效果。我們首先定義一個.container元素，然后通過設置其position屬性為relative屬性，使得.overlay-image元素的位置可以基于container元素進行定位。同時，將.overlay-image元素的內容為內聯塊，方便與其他元素進行排列。接著，我們設置了.overlay-image::before偽類，為其設置了content屬性并賦值為空字符串，來模擬像是這個元素上有一個偽類。我們還給這個元素設置了absolute定位，以及top、left屬性均為0，使得它與.overlay-image元素完全重合。我們設置了background-image屬性，并賦值為我們所需要的疊加圖片overlay.png，接著通過設置background-size屬性來控制圖片的大小適應容器。我們設置opacity屬性賦值為0.6，來實現圖片的透明處理。最后，我們將z-index屬性賦值為1，確保這個元素在.overlay-image元素之上。這段代碼即可實現圖片上加圖片的效果。