HTML5中标签直接支持透明PNG，只需图片本身含Alpha通道；叠加时用position: relative/absolute定位，Canvas默认支持PNG透明混合，旧浏览器需用PNG-8兼容。
HTML5里直接用 ![HTML5怎样插入透明PNG_HTML5插入透明PNG方式【叠加】]()
不需要额外设置，只要PNG文件本身带Alpha通道（即真正支持透明），
注意点：
- 确保PNG是真·透明格式（比如用 Photoshop 导出时勾选“透明度”，或用
pngquant压缩时保留 alpha） -
浏览器默认就支持，无需
或 JS 干预 - 如果看到灰色/黑色背景，大概率是图片导出时没保存透明通道，不是HTML写法问题
叠加多个透明PNG：用CSS定位 + z-index
想让一张PNG盖在另一张上面（比如头像+徽章、图标+角标），核心是脱离文档流并分层。最稳妥方式是用父容器 position: relative，子图用 position: absolute 定位。
@@##@@ @@##@@
关键细节：
立即学习“前端免费学习笔记（深入）”；
-
badge.png必须自身含透明背景，否则会遮住下面的图 - 不要依赖
opacity模拟叠加，它会让整张图变淡，包括透明区域 - 如果叠加后边缘发灰，检查是否用了“半透明PNG”但被Photoshop存成了“索引色+透明度”，应改用“RGB + Alpha”模式
用 globalAlpha 吗？
不需要。Canvas 默认就支持PNG透明像素的自然混合，只要用 ctx.drawImage() 绘制带Alpha的PNG，透明部分会自动透出下层内容或canvas背景色。
只有当你想让整张图变半透明（比如淡入效果），才需要设 ctx.globalAlpha = 0.8；否则保持默认 1.0 即可。
易错点：
- Canvas画布本身背景是黑色，若没清空或设背景色，透明PNG叠上去会显黑边 → 先执行
ctx.fillStyle = '#fff'; ctx.fillRect(0,0,w,h); -
跨域图片（如CDN上的PNG）直接 drawImage 会触发污染（
SecurityError）→ 需服务端配CORS或加crossorigin="anonymous"属性
为什么有时透明PNG在IE11或旧Android上显示异常？
不是HTML5的问题，是渲染引擎对PNG-alpha的支持差异。IE11及以下不支持PNG-24的完整Alpha（只支持PNG-8的二值透明），旧Android WebView（4.3及以前）也有类似限制。
兼容方案（仅当必须支持这些环境时）：
- 用工具转成PNG-8 + 透明索引（如用 ImageMagick：
convert in.png -type PaletteAlpha out.png） - 避免使用半透明像素（如阴影、渐变透明），只保留“全透/不透”两种状态
- 别依赖CSS
filter: drop-shadow()叠加，它在旧环境下可能把透明区域渲染成实色
现在绝大多数项目已不用考虑这些，但如果客户明确要求兼容 IE11，PNG素材得提前按老标准处理——这点很容易被忽略，等上线才发现徽章边缘糊成一片灰。
