在CSS中分层图像 - 可以将2个图像放在同一个元素中？

在CSS中，可以使用伪元素（pseudo-elements）和背景图片来实现在同一个元素中显示两个图像。伪元素是一种特殊类型的选择器，它允许你在特定元素的前后添加额外的内容。

以下是一个示例，展示了如何在同一个元素中显示两个图像：

<!DOCTYPE html>
<html>
<head><style>
.image-container {
  position: relative;
  width: 200px;
  height: 200px;
}

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

.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("image2.jpg");
  z-index: 2;
}
</style>
</head>
<body>

<div class="image-container"></div>

</body>
</html>

在这个示例中，我们创建了一个名为 image-container 的 div 元素，并使用伪元素 ::before 和 ::after 分别添加了两个背景图像。通过设置 z-index 属性，我们可以控制图像的堆叠顺序。在这个例子中，image1.jpg 位于 image2.jpg 的下方，但如果需要，你可以通过调整 z-index 值来改变它们的顺序。

这种方法可以让你在同一个元素中显示多个图像，从而实现分层效果。请注意，这种方法可能不适用于所有场景，具体取决于你的设计需求和浏览器兼容性。