HTML 設置圖片底層 在 HTML 頁面中，我們常常需要設置多個圖片疊放在一起顯示。通常情況下，先顯示的圖片會被后顯示的圖片覆蓋。然而，我們有時候需要讓某些圖片處于底層，被其他圖片所覆蓋。那么，怎么樣才能設置圖片底層呢？ 答案是通過 CSS 樣式表。我們可以通過以下步驟來實現： 1. 創建一個 div 容器，并將其中的圖片放置于該容器中。 例如，我們想要讓圖片 A 處于底層。

<div class="image-container">
<img src="image-a.jpg" alt="Image A">
<img src="image-b.jpg" alt="Image B">
</div>

2. 在 CSS 樣式表中設置 .image-container 類的 position 屬性為 relative。 這一步是為了確保子元素（即圖片）可以相對于父元素（即容器）定位。

.image-container {
position: relative;
}

3. 對需要設置底層的圖片，設置 z-index 屬性值為 -1。 z-index 屬性用于設置元素的堆疊順序。數值越大的元素會被覆蓋在數值較小的元素之上。當 z-index 屬性值為負數時，元素會被放置于頁面的底層。

.image-container img:first-child {
z-index: -1;
}

通過以上步驟，我們成功地將圖片 A 放置于頁面的底層。需要注意的是，如果有多個圖片需要設置底層，我們需要確保它們都處于同一個容器中，并對每個需要設置底層的圖片單獨設置 z-index 屬性。 綜上所述，通過 CSS 樣式表中的 position 和 z-index 屬性，我們可以輕松地將圖片放置于頁面的底層，實現自己所需的設計效果。