用 grid 创建单单元格叠图容器需将两张图片包裹在 position: relative 的 wrapper 中，各自设 position: absolute; top: 0; left: 0; 并通过 z-index 和 opacity/mix-blend-mode 控制叠层与融合效果。
用 grid 创建单单元格叠图容器
Grid 本身不直接支持“在同一个单元格里叠放多个子元素”，但你可以把一个 div 当作 Grid 容器，再让它内部成为相对定位上下文，让两张图片都绝对定位到同一位置。关键不是靠 Grid 的轨道重叠，而是靠子元素脱离文档流后手动对齐。
- Grid 容器只需定义一个单元格（比如
grid-template: 1fr / 1fr），用来占位和控制尺寸 - 两张图片不能直接作为 Grid 子项堆进同一格——那样会按源顺序层叠，但难以精准对齐；更可靠的是把它们包进一个
position: relative的 wrapper 里，再各自设position: absolute; top: 0; left: 0; - 务必给 wrapper 设
width和height，否则绝对定位的图片可能塌缩
z-index 控制图层顺序与透明度配合
两张图谁在上、谁在下，完全由 z-index 决定。对比图常见需求是底图固定、顶图可调透明度做叠加观察，这时候别忘了顶图要加 opacity 或用 mix-blend-mode。
- 底图建议设
z-index: 1，顶图设z-index: 2；值不用大，只要保证顺序即可 - 如果顶图用了
opacity: 0.7，注意它会影响所有后代元素（如有文字标注需单独提z-index） -
mix-blend-mode: multiply在某些对比场景比透明度更自然，但兼容性略低（IE 不支持）
响应式下保持两张图严格对齐
一旦缩放或视口变化，两张图尺寸稍有偏差就会错位。不能只依赖 width: 100%，得用更稳的方式锚定。
- wrapper 设
display: grid; place-items: center;可居中内容，但更推荐统一用object-fit: cover+ 固定宽高比容器 - 两张
width: 100%; height: 100%; object-fit: contain;，避免拉伸变形 - 若图片原始尺寸差异大，提前用 JS 或后端统一裁切为相同分辨率，CSS 很难自动对齐像素级边缘
避免常见错位 bug：父容器溢出与边框干扰
看着对齐了，截图一放大发现偏了 1px？大概率是默认 img 的 display: inline 带来的基线间隙，或者父容器没清除 margin/padding。
- 给 wrapper 加
font-size: 0或把img设为display: block，干掉行内元素默认间隙 - 检查 wrapper 是否有
border或outline，它们会改变盒模型尺寸，导致绝对定位参考点偏移 - Chrome DevTools 里开启“Rendering > Paint flashing”，能快速看出哪些区域被重复绘制或错层
实际最易忽略的是图片加载时机：顶图晚于底图渲染时，absolute 定位可能基于未完成布局计算，导致初始错位。加个 img.onload 后强制重绘 wrapper 尺寸，或统一用 aspect-ratio 预留空间，比纯 CSS 更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
