如何将透明图片网格叠加在背景图片网格之上？

你的需求是让两组图片网格叠加显示，上层（frontlayer）半透明。之前设置position:absolute没生效的核心原因是没有定位上下文，absolute元素默认相对于整个文档定位，而非和下层网格对齐。以下是修改方案：

关键修改点 #

• 给两个网格添加外层容器，设置position: relative，作为上层网格的定位参照
• 给上层网格的单元格添加半透明效果（用opacity或背景色透明度均可）
• 给上层网格设置top: 0; left: 0，确保和下层网格完全重叠

修改后的完整代码 #

HTML #

<div class="grid-container">
  <div class="backlayer"></div>
  <div class="frontlayer"></div>
</div>

CSS #

.grid-container {
  position: relative;
  width: 100vmin;
  height: 100vmin;
}

.backlayer {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1vmin;
}

.backlayer > * {
  border: 0 solid;
  background-image: var(--bg);
  background-size: cover;
  background-position: center center;
}

.frontlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1vmin;
}

.frontlayer > * {
  border: 1vmin solid;
  background-image: var(--bg);
  background-size: cover;
  background-position: center center;
  /* 设置半透明，若不想让边框也透明，可改用background-color: rgba(255,255,255,0.4) */
  opacity: 0.6;
}

JavaScript #

const backlayer = document.querySelector('.backlayer');
const numberOfItems = 16;
for (let row = 0; row < 4; row++) {
  for (let col = 0; col < 4; col++) {
    let cell = document.createElement('div');
    cell.classList.add('cell');
    backlayer.appendChild(cell);
  }
}

const cells = backlayer.querySelectorAll('.cell');
for (let i = 0; i < numberOfItems; i++) {
  var xpos = i % 4;
  var ypos = (i - xpos) / 4;
  var myurl = "url(https://picsum.photos/id/1015/200/200?" + ("X" + xpos) + "/" + ("Y" + ypos) + ")";
  cells[i].style.setProperty('--bg', myurl);
}

// 上层透明网格
const frontlayer = document.querySelector('.frontlayer');
const numberOfItems2 = 4;
for (let row = 0; row < 2; row++) {
  for (let col = 0; col < 2; col++) {
    let cell = document.createElement('div');
    cell.classList.add('cell');
    frontlayer.appendChild(cell);
  }
}

const cells2 = frontlayer.querySelectorAll('.cell');
for (let i = 0; i < numberOfItems2; i++) {
  xpos = i % 2;
  ypos = (i - xpos) / 2;
  var myurl2 = "url(https://picsum.photos/id/1016/200/200?" + ("X" + xpos) + "/" + ("Y" + ypos) + ")";
  cells2[i].style.setProperty('--bg', myurl2);
}

内容的提问来源于stack exchange，提问作者Pete