如何在Grid布局中为前置海报添加后置偏移底图并调整样式？

我有两个包含海报图片的div，希望在每个div的后方添加另一张海报，并实现以下效果：

• 设置x、y方向的offset值
• 用半透明div覆盖以加深其色调
• 在保持宽高比的前提下缩小尺寸
  如何在现有Grid布局中实现上述需求，且不修改前置的两张海报？

核心思路是利用绝对定位在每个.poster-container内部新增后置海报元素，通过CSS控制偏移、缩放和遮罩，完全不改动原有海报的结构与样式。

1. HTML 修改 #

在每个.poster-container的最顶部插入后置海报的容器（包含海报图和遮罩层），默认会处于原有海报的下方层级：

<div class="poster-container">
  <!-- 新增的后置海报模块 -->
  <div class="poster-backdrop">
    <img class="poster poster-backdrop-img" id="poster1-backdrop" />
    <div class="poster-backdrop-overlay"></div>
  </div>
  <!-- 原有海报内容 -->
  <img class="poster" id="poster1" />
  <div class="title">
    <a id="poster1-link" target="_blank">
      <div class="name" id="name1"></div>
    </a>
    <div class="year" id="year1"></div>
  </div>
</div>

对第二个.poster-container做同样修改，替换对应的ID为poster2-backdrop即可。

2. CSS 修改 #

添加以下样式实现所有需求：

/* 后置海报容器：绝对定位占满父容器，控制偏移和缩放 */
.poster-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* x/y方向偏移值，可按需调整 */
  transform: translate(8%, 8%);
  /* 缩小尺寸，保持宽高比，数值小于1即可 */
  scale: 0.85;
  /* 确保在原有海报下方 */
  z-index: 0;
}

/* 后置海报图片：保持宽高比填充容器 */
.poster-backdrop-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* 半透明遮罩层：加深后置海报色调 */
.poster-backdrop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 深灰色半透明遮罩，可修改颜色或透明度 */
  background-color: rgba(0, 0, 0, 0.6);
}

/* 原有海报提升层级，避免被后置海报遮挡 */
.poster {
  position: relative;
  z-index: 1;
}

• transform: translate(8%, 8%)：控制x/y方向的偏移距离，数值可自由调整
• scale: 0.85：按比例缩小后置海报，保证宽高比不变
• background-color: rgba(0,0,0,0.6)：半透明遮罩，调整alpha值可改变色调加深程度

3. JavaScript 修改 #

在update函数中添加后置海报的图片赋值逻辑：

function update() {
  poster1 = "https://unsplash.it/458/679.jpg";
  poster2 = "https://unsplash.it/458/679.jpg";
  // 后置海报的图片地址，可替换为不同海报
  poster1Backdrop = "https://unsplash.it/458/679?image=10";
  poster2Backdrop = "https://unsplash.it/458/679?image=11";

  document.getElementById("name1").innerText = data.film1.title;
  document.getElementById("name2").innerText = data.film2.title;
  document.getElementById("year1").innerText = data.film1.year;
  document.getElementById("year2").innerText = data.film2.year;
  
  document.getElementById("poster1").setAttribute("src", poster1);
  document.getElementById("poster2").setAttribute("src", poster2);
  // 为后置海报设置图片
  document.getElementById("poster1-backdrop").setAttribute("src", poster1Backdrop);
  document.getElementById("poster2-backdrop").setAttribute("src", poster2Backdrop);
}

效果说明 #

• 后置海报会以偏移、缩小的样式显示在原有海报后方
• 半透明遮罩层加深后置海报色调，突出原有海报的主体地位
• 完全保留原有Grid布局和前置海报的结构、样式，无任何破坏性修改

内容的提问来源于stack exchange，提问作者Max J.