结论：mask-size: cover + mask-position: center 是响应式遮罩的黄金组合，搭配-webkit-mask-image前缀和svg遮罩可确保主流设备稳定自适应；png需剥离色彩配置文件，渐变遮罩跨浏览器可靠方案是svg 引用灰度渐变。
直接说结论：靠mask-image + mask-size: cover + mask-position: center，再补上-webkit-mask-image前缀，就能在主流设备上稳定自适应——但前提是遮罩图本身得是矢量（SVG）或高分辨率位图，且不能依赖mask-mode: alpha。
为什么mask-size: contain经常失效？
很多人一上来就写mask-size: contain，结果在 iPhone 或小屏 Android 上遮罩被压缩变形，图片显示不全。根本原因是：contain按“完整显示遮罩图”缩放，而遮罩图尺寸固定（比如 200×200px），在窄屏下会留白；cover才是让遮罩图“填满容器”，并自动裁切多余部分，确保关键区域始终居中可见。
-
mask-size: cover+mask-position: center是响应式遮罩的黄金组合 - 若遮罩图是 PNG，必须保证其宽高比与目标容器一致，否则
cover会裁掉边缘内容 - SVG 遮罩天然适配，但需确保
<svg></svg>根元素没设死宽高（如width="200"），否则 Safari 会忽略mask-size
怎样让渐变遮罩在所有浏览器里都“真遮罩”？
写mask-image: linear-gradient(to bottom, black, transparent)看似简洁，但在 Firefox 中直接被忽略，在 Safari 中transparent会被转成#000导致全显——这不是 bug，是规范差异。
- Firefox 目前（2026 年中）仍不支持 CSS 渐变作为
mask-image值 - Safari 要求渐变色只能是纯灰度：用
#000/#fff，禁用rgba()和transparent - 真正跨浏览器可靠的方案是 SVG
<mask></mask>+url(#id)引用，且<lineargradient></lineargradient>的stop-color必须为十六进制（如#000） - 记得双写：
-webkit-mask: url(#fadeMask)和mask: url(#fadeMask)
为什么给<img>加 mask 后在 iOS 上一片黑？
常见于使用 PNG 遮罩图时：iOS Safari 对 PNG 的 alpha 通道解析极严格，如果遮罩图导出时带嵌入配置文件（如 Adobe RGB）、或有半像素抗锯齿残留，它会直接拒绝渲染，表现为整个元素变黑或透明。
- 解决方案：用 Sketch/Figma 导出 PNG 时选“RGB”+“无色彩配置文件”，或用 ImageMagick 剥离元数据：
convert mask.png -strip mask-clean.png - 更稳妥的是换 SVG 遮罩——它不依赖像素精度，只读亮度值，iOS 兼容性远高于 PNG
- 别忘了给
<img>显式设display: block，inline 元素在 Safari 中可能因尺寸未计算导致 mask 不触发
最常被忽略的一点：遮罩生效靠的是亮度（luminance），不是 alpha。哪怕你用了带透明通道的 PNG，浏览器也只取其灰度值——所以别指望靠 PNG 边缘的 1px 半透明来柔化遮罩，得用 SVG 的<fegaussianblur></fegaussianblur>或 CSS 渐变里的灰阶过渡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
