CSS在同一元素中叠加图片 – 是否可以将两个图片放在同一元素中

在本文中，我们将介绍在CSS中如何使用叠加图片的技巧，探讨是否可以将两个图片同时放置在同一元素中。

CSS是一种用于网页样式设计的语言，通过使用CSS，我们可以对网页的各个元素进行样式设置，包括背景图片。通常情况下，我们只能为一个元素设置一张背景图片。然而，有时候我们希望能够在同一元素中放置多张图片，这样可以实现一些独特的效果，比如图层叠加、混合等效果。

阅读更多：CSS 教程

CSS 背景叠加（Background Overlay）

在CSS中，我们可以通过使用伪元素（::before或::after）来实现背景的叠加效果。首先，我们需要为元素设置一个背景图片，然后通过伪元素来添加另一张背景图片，从而实现图片的叠加效果。

.container {
  position: relative;
  background-image: url('image1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image2.jpg');
  opacity: 0.5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

在上面的示例中，我们首先为容器元素设置了一张背景图片（image1.jpg），然后使用伪元素::before添加了另外一张背景图片（image2.jpg）。通过设置伪元素的position属性为absolute，使其覆盖在原始图片上方。通过设置伪元素的opacity属性，可以控制叠加图片的透明度。

CSS 图片混合（Image Blending）

除了背景叠加之外，CSS还提供了图片混合效果，可以将两张图片通过不同的混合模式进行混合。需要注意的是，图片混合只能在支持CSS混合模式的浏览器中显示。

.container {
  position: relative;
}

.image1 {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
}

.image2 {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
}

在上面的示例中，我们分别为两个容器元素（.image1和.image2）设置了绝对定位，并通过mix-blend-mode属性为每个容器指定了不同的混合模式。通过不同的混合模式，我们可以调整图片之间的叠加效果，从而实现不同的视觉效果。

CSS 伪类选择器（Pseudo-class selectors）

除了使用伪元素来实现图片叠加效果之外，我们还可以通过使用CSS的伪类选择器来在同一元素中放置多张图片。

.container {
  position: relative;
  background-image: url('image1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.container:hover {
  background-image: url('image2.jpg');
}

在上面的示例中，我们首先为容器元素设置了一张背景图片（image1.jpg）。然后，通过使用:hover伪类选择器，当鼠标悬停在元素上时，会改变元素的背景图片为image2.jpg。这样就实现了在同一元素中放置不同的图片并在交互时进行切换的效果。