如何为上层带背景的Div添加动态偏移并适配窗口尺寸

问题描述 #

我有两个div：

• back：带有背景图片
• front：带有透明背景图片，置于上层

希望通过background-size: cover实现图片居中、两侧均等裁剪/延伸，当前代码的缩放效果符合预期，但上层front的水龙头与下层back的水槽位置无法对齐，尝试过固定像素偏移、内边距等方法，窗口尺寸变化时对齐失效。要求优先纯CSS方案，也可接受JS方案，尽量不用canvas，且无法通过编辑front图片解决（水槽高度动态变化）。

当前代码如下：

CSS代码 #

.back{
  background-image: url('https://i.ibb.co/W5rb9Mp/358-1676542377653745.png'); 
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.front{
  background-image: url('https://i.ibb.co/NtXq0Sv/297-1676449694919336.png'); 
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}

HTML代码 #

<div class="back">
  <div class="front">
  </div>
</div>

注：实际应用中图片会放在容器内，以上为简化版本。

解决方案 #

1. 纯CSS方案（推荐） #

核心是利用transform的百分比偏移，其偏移量基于元素自身尺寸，会随容器缩放按比例调整，避免固定像素偏移的失效问题。

假设通过测量原始图片，确定需要让front相对于back垂直偏移X%（比如向下偏移2%），修改front的CSS：

.front{
  /* 原有属性保持不变 */
  background-image: url('https://i.ibb.co/NtXq0Sv/297-1676449694919336.png'); 
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  /* 添加以下偏移 */
  transform: translateY(2%);
  /* 若需要水平偏移，可添加 translateX(XX%) */
}

如果需要更精准的比例，可基于原始图片中对齐元素的相对位置计算偏移百分比：
比如back中水槽的Y坐标占图片高度的比例为P1，front中水龙头的Y坐标占图片高度的比例为P2，那么偏移百分比为(P1 - P2) * 100%，设置：

transform: translateY(calc((P1 - P2) * 100%));

2. JS方案（精准对齐） #

当需要完全精准对齐，或无法确定图片相对比例时，可通过JS监听容器尺寸变化，动态计算偏移量：

const back = document.querySelector('.back');
const front = document.querySelector('.front');

// 替换为实际测量的图片元素坐标（相对于图片顶部）
const SINK_Y_IN_BACK = 300; // back图中水槽的Y坐标（示例值）
const TAP_Y_IN_FRONT = 250; // front图中水龙头的Y坐标（示例值）

function adjustAlignment() {
  // 加载图片获取原始尺寸
  const backImg = new Image();
  const frontImg = new Image();
  
  backImg.src = getComputedStyle(back).backgroundImage.replace(/url\(['"]?(.*?)['"]?\)/, '$1');
  frontImg.src = getComputedStyle(front).backgroundImage.replace(/url\(['"]?(.*?)['"]?\)/, '$1');

  backImg.onload = () => {
    frontImg.onload = () => {
      const containerW = back.offsetWidth;
      const containerH = back.offsetHeight;

      // 计算cover模式下的图片缩放比例（取宽高缩放的较大值）
      const backScale = Math.max(containerW / backImg.width, containerH / backImg.height);
      const frontScale = backScale; // 两张图缩放比例一致

      // 计算容器中水槽和水龙头的实际位置
      const sinkPosY = (backImg.height * backScale - containerH) / 2 + SINK_Y_IN_BACK * backScale;
      const tapPosY = (frontImg.height * frontScale - containerH) / 2 + TAP_Y_IN_FRONT * frontScale;

      // 计算需要的偏移量并应用
      const offsetY = sinkPosY - tapPosY;
      front.style.transform = `translateY(${offsetY}px)`;
    };
  };
}

// 初始化对齐
adjustAlignment();
// 监听窗口尺寸变化，实时调整
window.addEventListener('resize', adjustAlignment);

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