CSS實現圖片疊加 在網頁設計中，有時需要多個圖片疊加，呈現出一種層次感，使頁面更加美觀。這時，我們可以通過CSS來實現圖片的疊加效果。 首先，我們需要在HTML中添加圖片。如下例：

<div class="container">
<img src="img1.jpg" alt="Image 1">
<img src="img2.png" alt="Image 2">
<img src="img3.gif" alt="Image 3">
</div>

接著，我們可以通過CSS中的position屬性來定位圖片的位置，并設置z-index屬性來控制圖片的層次順序。如下例：

.container {
position: relative;
}
.container img {
position: absolute;
top: 0;
left: 0;
}
.container img:nth-child(2) {
z-index: 1;
}
.container img:nth-child(3) {
z-index: 2;
}

在上面的例子中，.container類設置了position: relative，使其成為相對定位的父級元素。container下的每一個img元素都設置了position: absolute，避免圖片默認位置的影響。其中，通過:nth-child(2)及:nth-child(3)選擇器來選取需要疊加的圖片，再通過z-index屬性設置層次順序。這里以第二張和第三張圖片為例，實現了前者在后者上方的效果。 除了使用:nth-child選擇器之外，我們還可以使用其他選擇器來選定需要設置疊加效果的圖片。例如，使用class或id選擇器來選定。如下例：

<div class="container">
<img src="img1.jpg" alt="Image 1">
<img src="img2.png" alt="Image 2" class="over">
<img src="img3.gif" alt="Image 3" id="topmost">
</div>
.container {
position: relative;
}
.container img {
position: absolute;
top: 0;
left: 0;
}
.over {
z-index: 1;
}
#topmost {
z-index: 2;
}

在這個例子中，我們將需要疊加的圖片分別添加類名和id名，并在CSS中使用相應的選擇器進行選擇和設置層次順序。 總之，CSS提供了多種方式來實現圖片的疊加效果，通過定位和z-index屬性的設置，我們可以輕松地控制圖片的層次順序，使其呈現出不同的疊加效果。