CSS實(shí)現(xiàn)兩張圖片覆蓋的方法

在CSS中，我們可以使用***定位來(lái)實(shí)現(xiàn)兩張圖片的覆蓋，以下是一個(gè)簡(jiǎn)單的示例：

HTML代碼：

<div class="image-container">
  <img class="image1" src="image1.png" alt="Image 1">
  <img class="image2" src="image2.png" alt="Image 2">
</div>

CSS代碼：

.image-container {
  position: relative;
  width: 500px;
  height: 500px;
}
.image1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為image-container的容器，用于包含兩張圖片，我們?yōu)?**張圖片（image1）和第二張圖片（image2）都設(shè)置了***定位，由于***定位的元素會(huì)脫離文檔流，因此它們會(huì)疊加在一起，我們將兩張圖片的寬度和高度都設(shè)置為100%，以確保它們能夠完全覆蓋容器，我們將兩張圖片放置在容器的左上角（top: 0; left: 0;），以確保它們能夠緊密貼合在一起。