css定了一个或多个图片叠加的样式

CSS可以让我们为图片添加各种各样的效果，其中之一就是将图片叠加起来。我们可以使用z-index和position属性来完成这个效果。

.img1 {
  position: absolute;  
  z-index: 1;  
}

.img2 {
  position: absolute;  
  z-index: 2;  
}

为了能够叠加图片，我们需要将它们放到同一个容器内。

在上面的代码中，第一张图片的z-index为1，第二张图片的z-index为2，这意味着第二张图片将会在第一张图片之上，看起来就像是两张图片叠在一起。

当然，我们也可以使用CSS的伪元素来创建图片叠加效果。下面的代码中，我们使用了::before和::after伪元素，分别在原图片的前面和后面添加了一张图片。

.container {
  position:relative;
}

img {
  position: relative;
  z-index: 1;
}

img::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: -10px;
  left: -10px;
  background-image: url(image1.jpg);
  z-index: -1;
}

img::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 10px;
  left: 10px;
  background-image: url(image2.jpg);
  z-index: -1;
}

在上面的代码中，我们将容器设为相对定位，然后使用绝对定位将伪元素放置到了原图片的前面和后面，达到了叠加的效果。

通过使用z-index和position属性，我们可以轻松地创建图片叠加效果，为网页增加更丰富的视觉体验。