用position: absolute叠加图片需父容器设position: relative，img2用absolute+top/left定位，居中用top:50%;left:50%;transform:translate(-50%,-50%)，z-index显式设置更稳妥。

用 CSS 的 position 实现图片叠加

直接用 position: absolute 把第二张图“叠”在第一张图上，是网页里最常用、兼容性最好、也最容易控制的方式。前提是父容器得有定位上下文（比如 position: relative），否则 absolute 会往上一直找，可能叠到整个页面顶部去。

常见错误现象：img2 突然消失或出现在页面左上角——八成是忘了给父容器加 position: relative。

• 父容器必须设 position: relative（或其他非 static 值）
• 被叠的图（img2）设 position: absolute，再用 top/left 微调位置
• 如果想让 img2 居中盖在 img1 上，用 top: 50%; left: 50%; transform: translate(-50%, -50%);
• 注意 z-index：默认后写的元素层级更高，但显式设 z-index: 1 和 z-index: 2 更稳妥

用 background-image 叠加更轻量

如果第二张图只是装饰性水印、角标或固定图案，不需交互、不需响应式缩放，直接当背景图塞进第一张图的容器里，代码更少、渲染更快，也不用操心层级和尺寸错位。

使用场景：网站 logo 水印、状态角标（如“NEW”）、渐变蒙层。

• 把主图作为 <div> 的 <code>background-image，再用 background-image: linear-gradient(), url(...) 叠加一层
• 或者用伪元素：::before 设背景图并绝对定位，父容器仍需 position: relative
• 缺点：背景图不能被右键保存、无法设置 alt 文字、不参与语义化结构

避免 img 标签堆叠时的尺寸塌陷

两个 <img alt="html网页设计如何将两个图片叠加" > 并排写，默认是 inline 元素，父容器没高度就会塌掉，导致叠加失效或布局乱掉。

容易踩的坑：只顾着加 position，忘了清浮动或处理文档流。

• 给父容器设 display: block 或 overflow: hidden 防止塌陷
• 或者给两个 <img alt="html网页设计如何将两个图片叠加" > 都加 display: block，彻底脱离 inline 流
• 如果用了 vertical-align（比如 middle），要小心基线对齐带来的额外空白

透明 PNG 叠加要注意浏览器默认行为

带 alpha 通道的 PNG 在老版 IE（IE8 及以下）里不支持透明，会显示灰色背景；现代浏览器没问题，但如果你的 img2 是半透明 PNG，得确认目标用户环境。

性能影响：透明图层本身不卡，但如果叠加区域频繁重绘（比如配合 JS 动画），建议加 will-change: transform 或用 transform: translateZ(0) 触发 GPU 加速。

• 别用 opacity 实现半透叠加——它会让整个元素（含子内容）一起变透明
• 优先用 PNG 自身 alpha，或用 rgba() 色值做纯色蒙层
• 如果必须兼容 IE8，用 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader（仅限内联样式，且不支持 CSS Sprite）

真正麻烦的不是怎么叠，而是叠完之后要不要响应式缩放、要不要适配高 DPI 屏幕、要不要考虑屏幕阅读器能否识别叠加关系——这些点一旦漏掉，视觉上看着对了，实际体验可能已经断层了。