在背景图像网格上分层透明图像网格

Question

我有这段代码，可以显示 2 个图像网格（这些图像是较大图片的一小部分）。目前网格显示在页面的顶部和底部 - 我想叠加它们。第二个网格图像（“frontlayer”）是部分透明的。

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);
}

// below section for top transparent layer

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);
}

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

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

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

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

<div class="backlayer"></div>
<div class="frontlayer"></div>

可能不是最好的 HTML，所以我对此表示歉意，但它确实有效，只是似乎无法将两个网格放置在彼此之上。这里有很多示例如何使用单个静态图像执行此操作，但没有涉及网格方面，我只是不知道如何更改现有示例以适应我的情况。

蒂亚，皮特

Answer 1

要使网格堆叠在一起，您只需要一个包含两个网格的 div，您可以将它们设置为绝对位置，并将父级 div 位置设置为相对位置，如下所示：

.parentDiv{
  position:relative;
}
.backlayer {
  position: absolute;
  width: 100vmin;      
  height: 100vmin;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1vmin;
}    
.frontlayer {
  position: absolute;
  z-index: 1;
  width: 100vmin;
  height: 100vmin;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1vmin; 
}

你想要的网格在前面得到z-index:1;