CSS兩張圖片疊加的方法

在CSS中，我們可以使用***定位或者相對定位來實(shí)現(xiàn)兩張圖片的疊加，下面我們將通過***定位來實(shí)現(xiàn)。

我們需要在HTML中創(chuàng)建兩個(gè)圖片元素，并給它們分別設(shè)置id。

<div id="image-container">
  <img id="image1" src="image1.png" />
  <img id="image2" src="image2.png" />
</div>

在CSS中，我們可以使用***定位將第二個(gè)圖片元素疊加在***個(gè)圖片元素上面。

#image-container {
  position: relative;
}
#image1 {
  position: absolute;
  top: 0;
  left: 0;
}
#image2 {
  position: absolute;
  top: 0;
  left: 0;
}

在上面的CSS代碼中，我們將#image-container元素的定位設(shè)置為relative，這樣我們可以將子元素的定位相對于它進(jìn)行定位，我們將#image1和#image2元素的定位都設(shè)置為absolute，并將它們的top和left屬性都設(shè)置為0，這樣第二個(gè)圖片元素就會疊加在***個(gè)圖片元素的上面。

需要注意的是，如果兩張圖片的大小不同，那么疊加后的效果可能會受到較大的影響，在疊加圖片時(shí)，***好保證它們的大小相同或者相似。