CSS疊加兩張圖片的方法

在CSS中，我們可以使用***定位或者相對定位來疊加兩張圖片，下面是一個使用***定位的例子：

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: 300px;
  height: 300px;
}
.image1 {
  position: absolute;
  top: 0;
  left: 0;
}
.image2 {
  position: absolute;
  top: 0;
  left: 0;
}

在這個例子中，我們創(chuàng)建了一個名為image-container的容器，并設置了它的寬度和高度，我們將image1和image2都設置為***定位，并讓它們位于容器的左上角，由于它們的top和left屬性都設置為0，因此它們會疊加在一起。

這種方法可能會導致圖片重疊的部分變得模糊或失真，為了解決這個問題，我們可以使用CSS的z-index屬性來控制圖片的堆疊順序，我們可以將image1的z-index設置為1，將image2的z-index設置為2，這樣image2就會覆蓋在image1上面。

我們還可以使用CSS的transform屬性來對圖片進行旋轉(zhuǎn)、縮放等操作，以實現(xiàn)更豐富的疊加效果，希望這個例子能幫助你掌握CSS中疊加兩張圖片的方法。