CSS中實現(xiàn)重疊圖片的方法

在CSS中，我們可以使用***定位來實現(xiàn)圖片的重疊，以下是一個簡單的示例：

HTML結(jié)構(gòu)：

<div class="container">
    <img class="image1" src="image1.jpg" alt="Image 1">
    <img class="image2" src="image2.jpg" alt="Image 2">
    <img class="image3" src="image3.jpg" alt="Image 3">
    <img class="image4" src="image4.jpg" alt="Image 4">
    <img class="image5" src="image5.jpg" alt="Image 5">
    <img class="image6" src="image6.jpg" alt="Image 6">
    <img class="image7" src="image7.jpg" alt="Image 7">
    <img class="image8" src="image8.jpg" alt="Image 8">
    <img class="image9" src="image9.jpg" alt="Image 9">
    <img class="image10" src="image10.jpg" alt="Image 10">
</div>

CSS樣式：

.container {
    position: relative;
    width: 500px;
    height: 500px;
}
.image1, .image2, .image3, .image4, .image5, .image6, .image7, .image8, .image9, .image10 {
    position: absolute;
    top: 0;
    left: 0;
}
.image2 {
    z-index: 1;
}
.image3 {
    z-index: 2;
}
.image4 {
    z-index: 3;
}
.image5 {
    z-index: 4;
}
.image6 {
    z-index: 5;
}
.image7 {
    z-index: 6;
}
.image8 {
    z-index: 7;
}
.image9 {
    z-index: 8;
}
.image10 {
    z-index: 9;
}

在這個示例中，我們使用了***定位將圖片定位在容器的左上角，并使用z-index屬性來調(diào)整圖片的堆疊順序，通過調(diào)整z-index的值，我們可以控制圖片的顯示順序，這樣，我們就可以實現(xiàn)圖片的重疊效果了。