使用纯css使得两个背景叠加

在CSS中，有多种方法可以实现两个背景叠加的效果。以下是一些常用的方法：

方法一：使用background-image属性

你可以在一个元素上使用background-image属性来设置多个背景图像，并通过逗号分隔它们。这些背景图像将会按照它们在值列表中的顺序进行堆叠，第一个图像位于最顶层，最后一个图像位于最底层。

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-position: center, center; /* 调整背景图像的位置 */
  background-repeat: no-repeat, no-repeat; /* 控制背景图像的重复 */
}

方法二：使用伪元素

你可以使用伪元素（如::before和::after）来创建额外的背景层。每个伪元素都可以有自己的背景，从而实现背景叠加的效果。

.element {
  position: relative; /* 确保伪元素可以相对于此元素定位 */
}

.element::before,
.element::after {
  content: ""; /* 伪元素需要内容才能显示，这里使用空字符串 */
  position: absolute; /* 绝对定位伪元素 */
  top: 0; /* 定位到元素的顶部 */
  left: 0; /* 定位到元素的左侧 */
  width: 100%; /* 宽度与元素相同 */
  height: 100%; /* 高度与元素相同 */
}

.element::before {
  background-image: url('image1.jpg'); /* 设置第一个背景图像 */
  z-index: 1; /* 确保此伪元素位于其他内容之上 */
}

.element::after {
  background-image: url('image2.jpg'); /* 设置第二个背景图像 */
  z-index: 0; /* 确保此伪元素位于其他伪元素之下 */
}

方法三：使用CSS Grid或Flexbox和子元素

你还可以使用CSS Grid或Flexbox布局来创建包含多个子元素的容器，并为每个子元素设置不同的背景。然后，通过调整子元素的位置和大小，可以实现背景叠加的效果。

注意事项：

• 确保你的背景图像具有适当的尺寸和分辨率，以适应不同的屏幕和设备。
• 在使用多个背景时，注意背景图像之间的叠加顺序和透明度，以确保最终效果符合你的设计需求。
• 在某些情况下，可能需要使用额外的CSS属性（如background-size、background-clip等）来进一步调整背景图像的显示效果。