在前端開發中，我們經常會遇到需要顯示多張圖片重疊或者交替展示的情況，這時候就可以使用CSS實現。

1.圖片重疊顯示

.container{
position: relative; /* 父元素設置相對定位 */
}
.container img{
position: absolute; /* 圖片設置絕對定位 */
}

用position屬性的relative和absolute可實現圖片的相對組合效果。我們可以將多張圖片壘疊在一起，通過調整z-index屬性即可控制哪一張圖片位于上層。

2.圖片交替顯示

.container{
position: relative; /* 父元素設置相對定位 */
}
.container img{
position: absolute; /* 圖片設置絕對定位 */
opacity: 0; /* 初始狀態隱藏 */
transition: all 1s; /* 設置過渡效果 */
}
.container img:first-child{
opacity: 1; /* 第一張圖片顯示 */
}
.container:hover img{
opacity: 0; /* 鼠標移入父元素，所有圖片隱藏 */
}
.container:hover img:nth-child(2){
opacity: 1; /* 鼠標移入父元素，第二張圖片顯示 */
}

采用absolute再加上opacity屬性即可隱藏圖片。然后利用CSS3的過渡效果，當鼠標移入父元素時，利用:nth-child()偽類選擇器控制哪一張圖片顯示，從而實現圖片交替顯示的效果。