上述代碼中，.image-container類的position屬性設置為relative，為了讓 .image元素相對于它進行定位。每一個 .image 元素中，我們使用了background-image屬性，將背景圖片的URL地址設置進去。 接著，在 .image 類的 CSS 中，我們使用了 position:absolute 進行絕對定位，top和left屬性設置為0，保證 .image元素在 .image-container的左上角。由于我們不知道圖片的大小，所以我們將 .image元素的寬度和高度均設為100%。這樣，.image 疊加在底圖上，并做到了完全覆蓋。 最后，我們還可以對鼠標懸浮事件進行處理，提升用戶體驗。代碼如下：

HTML代碼：
CSS代碼：
.image-container {
position: relative;
overflow: hidden;
}
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.image:hover {
opacity: 1;
}

在 .image-container類中，我們添加了 overflow:hidden 屬性，使得圖片超出 .image-container范圍時，隱藏超出的部分。在 .image中，我們添加了 opacity屬性，并將其設置為0。這意味著上圖默認是透明的，疊加在底圖上的同時不會被用戶感知。我們還對過渡效果（transition）進行了配置，在鼠標懸浮時變成了不透明。此時上圖浮現，呈現出錦上添花的視覺效果。 通過控制樣式表，我們可以很容易地實現圖片疊加的效果并且添加進動畫。這種技術可以為您的網站呈現出更為復雜、更為生動的效果。