透明PNG叠加不透明几乎全是导出问题：未勾选透明度、误存PNG-8、压缩工具关闭alpha保留、索引颜色模式错误；CSS叠加需relative父容器、absolute子图、z-index控制层级，禁用opacity。

直接用 标签就能叠加透明 PNG，前提是图片本身带 Alpha 通道，不需要 JS 或 Canvas 干预。

为什么 加透明 PNG 有时不透明？

常见现象是看到灰色/黑色背景、边缘发虚、或上层图完全遮住下层——这几乎全是图片导出问题，不是 HTML 写法错误。

• Photoshop 导出时没勾选“透明度”，或误存为 PNG-8（仅支持 1 位透明，非 Alpha）
• 用压缩工具（如 tinypng、pngquant）时关闭了 alpha 保留选项
• 导出模式选了“索引颜色 + 透明度”，应改为“RGB + Alpha”
• 浏览器渲染没问题，但你在本地双击打开 PNG 文件看到灰底？那是查看器限制，不影响网页加载

用 CSS 定位实现多图叠加的最小可行写法

核心就三件事：父容器相对定位、子图绝对定位、z-index 控制顺序。别碰 opacity，它会把整张图变淡，包括本该透出的区域。

beatoven.ai

beatoven.ai是一款AI音频处理工具，免版税AI音乐创建平台。

下载

• 父容器必须设 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%"><img src="badge.png"  style="max-width:90%">
  </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）”处理——这类问题只能回修图软件调整导出设置，前端无解。