在網(wǎng)頁(yè)開(kāi)發(fā)中，經(jīng)常需要使用CSS來(lái)對(duì)圖片進(jìn)行處理，如圖片上疊加另一張圖片。下面我們就來(lái)學(xué)習(xí)一下如何使用CSS來(lái)實(shí)現(xiàn)這一效果。

.container {
position: relative;
}
.image1 {
position: absolute;
top: 0;
left: 0;
}
.image2 {
position: absolute;
top: 0;
left: 0;
}

上面的代碼中，我們首先需要將圖片所在的容器設(shè)置為relative定位。然后分別設(shè)置兩張圖片為absolute定位，并讓它們的位置都相對(duì)于容器的左上角。接下來(lái)我們可以在HTML中書寫以下代碼：

<div class="container">
<img src="image1.jpg" alt="image1" class="image1">
<img src="image2.png" alt="image2" class="image2">
</div>

在瀏覽器中，我們將會(huì)看到第二張圖片部分遮蓋了第一張圖片，達(dá)到了疊加效果。

除此之外，我們也可以為疊加的圖片添加一些透明度或其他效果，從而使這個(gè)效果更加炫酷。這里就不再贅述。