用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”）、渐变蒙层。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 把主图作为
<div> 的 <code>background-image，再用background-image: linear-gradient(), url(...)叠加一层 - 或者用伪元素：
::before设背景图并绝对定位，父容器仍需position: relative - 缺点：背景图不能被右键保存、无法设置
alt文字、不参与语义化结构 - 给父容器设
display: block或overflow: hidden防止塌陷 - 或者给两个
<img alt="html网页设计如何将两个图片叠加" >都加display: block，彻底脱离 inline 流 - 如果用了
vertical-align（比如middle），要小心基线对齐带来的额外空白 - 别用
opacity实现半透叠加——它会让整个元素（含子内容）一起变透明 - 优先用 PNG 自身 alpha，或用
rgba()色值做纯色蒙层 - 如果必须兼容 IE8，用
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader（仅限内联样式，且不支持 CSS Sprite）
避免 img 标签堆叠时的尺寸塌陷
两个 <img alt="html网页设计如何将两个图片叠加" > 并排写，默认是 inline 元素，父容器没高度就会塌掉，导致叠加失效或布局乱掉。
容易踩的坑：只顾着加 position，忘了清浮动或处理文档流。
透明 PNG 叠加要注意浏览器默认行为
带 alpha 通道的 PNG 在老版 IE（IE8 及以下）里不支持透明，会显示灰色背景；现代浏览器没问题，但如果你的 img2 是半透明 PNG，得确认目标用户环境。
性能影响：透明图层本身不卡，但如果叠加区域频繁重绘（比如配合 JS 动画），建议加 will-change: transform 或用 transform: translateZ(0) 触发 GPU 加速。
真正麻烦的不是怎么叠，而是叠完之后要不要响应式缩放、要不要适配高 DPI 屏幕、要不要考虑屏幕阅读器能否识别叠加关系——这些点一旦漏掉，视觉上看着对了，实际体验可能已经断层了。
