CSS中圖片疊加的方法

在CSS中，我們可以使用多種方法來實現(xiàn)圖片的疊加效果，以下是一些常見的方法：

1、使用***定位

我們可以將兩個圖片元素都設(shè)置為***定位，然后通過調(diào)整它們的z-index屬性來控制它們的疊加順序。

.image-stack {
  position: relative;
}
.image-stack img {
  position: absolute;
  top: 0;
  left: 0;
}
.image-stack img:first-child {
  z-index: 2;
}
.image-stack img:last-child {
  z-index: 1;
}

2、使用偽元素

我們可以使用偽元素（如::before和::after）來疊加圖片。

.image-stack {
  position: relative;
}
.image-stack::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("image1.png");
  z-index: 2;
}
.image-stack::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("image2.png");
  z-index: 1;
}

3、使用背景圖片

我們可以將多個圖片設(shè)置為元素的背景圖片，通過調(diào)整背景圖片的位置來控制它們的疊加順序。

.image-stack {
  background-image: url("image1.png"), url("image2.png");
  background-position: top left, bottom right;
}

是一些常見的CSS圖片疊加方法，你可以根據(jù)自己的需求選擇適合的方法來實現(xiàn)圖片的疊加效果。