移动端H5角标图片需用标准透明PNG（8/24位+Alpha，禁索引色），WebP需精准type声明，CSS实现红点/斜角等更兼容。
移动端 H5 中角标类图片（如红点、新标、折扣角标）常需带透明通道（PNG/APNG/WebP），但透明通道在部分安卓 WebView 和旧版 iOS 中容易出现兼容问题：背景发灰、边缘锯齿、alpha 混合异常，甚至整个图层变黑。核心不是“能不能用透明”，而是“怎么用才不破”。
确保 PNG 透明通道被正确解析
很多问题其实源于导出设置错误，而非浏览器不支持：
- PNG 必须是 8 位或 24 位真彩色 + Alpha 通道，禁用“索引色模式”（Indexed Color）——后者在安卓低版本 WebView 中会丢弃透明信息，渲染为纯黑或纯白背景
- 导出时关闭“保留编辑信息”“嵌入配置文件”等非必要元数据，某些 Android 系统的原生浏览器会因读取 ICC Profile 异常而拒绝渲染透明区域
- 避免使用 Photoshop 的“存储为 Web 所用格式”（已废弃），改用“导出 → 导出为…”并勾选“透明度”，确认预览中背景为棋盘格
WebP/AVIF 角标要降级兜底且 type 声明精准
想用 WebP 提升加载速度？必须配 <picture></picture>，且 type 字符串不能多一个空格或分号：
- ✅ 正确：
<source type="image/webp" srcset="badge-new.webp"></source> - ❌ 失效：
<source type="image/webp;" srcset="..."></source>（末尾分号）或type=" image/webp"（开头空格）→ 整个<source></source>被静默跳过，直接 fallback 到<img alt="H5 中响应式图片怎么处理移动端角标图片的透明通道兼容" > - fallback 的 PNG 必须是上面验证过的标准透明 PNG，不能是“看起来透明但实为白底+半透明”的伪透明图
CSS 层叠与混合模式要主动隔离
透明角标叠加在按钮、头像、卡片上时，父容器的 background、filter、transform 都可能干扰 alpha 渲染：
- 避免给角标父容器设
background: rgba(0,0,0,0.1)或backdrop-filter，这些在 Android 8–10 的 WebView 中会导致透明通道被强制合成出灰边 - 角标自身不要加
opacity，改用rgba()控制颜色透明度；若需淡入动画，用transform: scale()+visibility替代opacity过渡 - 在 iOS Safari 14.5 之前，
mix-blend-mode与透明 PNG 共存易崩，角标类元素一律禁用该属性
兜底方案：用 CSS 画简单角标更稳
对纯几何形角标（如右上角红点、左下角“NEW”丝带），优先考虑 CSS 实现：
- 红点：
border-radius: 50%; width: 8px; height: 8px; background: #ff4757;—— 无任何透明通道依赖，100% 兼容 - 斜角标签：
clip-path: polygon(0 0, 100% 0, 100% 80%, 85% 100%, 0 100%);+ 纯色背景 —— 避开 PNG 解码链 - 文字角标：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";+line-height: 1;+transform: scale(0.8);—— 清晰锐利，无抗锯齿失真
