透明PNG叠加不透明几乎全是导出问题：未勾选透明度、误存PNG-8、压缩工具关闭alpha保留、索引颜色模式错误；CSS叠加需relative父容器、absolute子图、z-index控制层级，禁用opacity。
直接用 <img alt="怎样实现透明图片叠加_PNG格式结合IMG标签应用" > 标签就能叠加透明 PNG，前提是图片本身带 Alpha 通道，不需要 JS 或 Canvas 干预。
为什么 <img alt="怎样实现透明图片叠加_PNG格式结合IMG标签应用" > 加透明 PNG 有时不透明？
常见现象是看到灰色/黑色背景、边缘发虚、或上层图完全遮住下层——这几乎全是图片导出问题，不是 HTML 写法错误。
- Photoshop 导出时没勾选“透明度”，或误存为 PNG-8（仅支持 1 位透明，非 Alpha）
- 用压缩工具（如 tinypng、pngquant）时关闭了 alpha 保留选项
- 导出模式选了“索引颜色 + 透明度”，应改为“RGB + Alpha”
- 浏览器渲染没问题，但你在本地双击打开 PNG 文件看到灰底？那是查看器限制，不影响网页加载
用 CSS 定位实现多图叠加的最小可行写法
核心就三件事：父容器相对定位、子图绝对定位、z-index 控制顺序。别碰 opacity，它会把整张图变淡，包括本该透出的区域。
- 父容器必须设
position: relative，否则absolute子元素会相对于 body 定位，极易错位 - 所有叠加图都加
position: absolute，再用top/right/z-index精确控制位置和层级 -
z-index只对定位元素生效；数值不必很大，1和2就够，避免后期冲突 - 示例：
<div style="position: relative; width: 300px; height: 200px;"> <img src="bg.png" style="max-width:90%" alt="怎样实现透明图片叠加_PNG格式结合IMG标签应用" > <img src="badge.png" style="max-width:90%" alt="怎样实现透明图片叠加_PNG格式结合IMG标签应用" > </div>
旧版 IE（IE6–8）要额外处理吗？
需要，但只限于极少数仍需兼容的场景。现代项目基本可忽略。
- 这些版本不支持 PNG-24 的 Alpha 通道，会显示灰/蓝背景
- 可用
DD_belatedPNG.fix()这类 JS 补丁，例如：DD_belatedPNG.fix('.header img'); - 补丁只对指定选择器生效，不能写成
DD_belatedPNG.fix('*')，性能差且易出错 - 注意：该脚本依赖 IE 特有的滤镜（filter），在 IE9+ 已废弃，所以仅用于明确锁定旧 IE 的遗留系统
最容易被忽略的一点：透明 PNG 叠加后，如果边缘出现半透明杂边（尤其在深色背景下），不是代码问题，而是原始 PNG 的 Alpha 边缘没做“预乘（premultiplied）”处理——这类问题只能回修图软件调整导出设置，前端无解。
