如何在两个CSS网格区域上重叠图像标签作为背景

<div class="grid-container">
  <div class="grid-item item1">Item 1</div>
  <div class="grid-item item2">Item 2</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 创建两列 */
  grid-gap: 10px; /* 网格间距 */
  width: 100%;
  height: 100vh; /* 使容器占满整个视口 */
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  position: relative; /* 使子元素可以相对于此元素定位 */
}

.item1 {
  background-color: rgba(0, 0, 255, 0.5); /* 半透明背景 */
}

.item2 {
  background-color: rgba(255, 0, 0, 0.5); /* 半透明背景 */
}

/* 添加重叠图像 */
.item1::before,
.item2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('path/to/your/image.jpg'); /* 替换为你的图像路径 */
  background-size: cover; /* 图像覆盖整个区域 */
  z-index: -1; /* 确保图像在其他内容之下 */
}