mask-mode 的核心差异在于图像数据解读方式：alpha 读取透明度通道，luminance 将 RGB 转为标准灰度（ITU-R BT.709）并映射为不透明度；两者结果常不一致，且 Safari 对 luminance 支持不稳定。
mask-mode 的实际行为差异，核心不在“写法对不对”，而在“图像数据怎么被解读”——alpha 读透明度通道，luminance 读亮度值。两者输出的遮罩结果经常不一致，尤其在跨浏览器时。
mask-mode: alpha 依赖图像 Alpha 通道，但不是所有图都有
很多开发者误以为只要用了 PNG 就自动有可用 Alpha 通道，其实不然：
- 导出时未勾选“透明背景”的 PNG，Alpha 通道全为 1（完全不透明），
mask-mode: alpha会整个遮罩失效 - JPEG 根本没有 Alpha 通道，设
mask-mode: alpha时浏览器直接忽略该图或 fallback 到全白遮罩（Chrome 表现为全显，Safari 可能黑块） - SVG
<mask>元素默认用mask-type="alpha"，但若内部用<rect fill="black">，黑=Alpha=0 → 完全隐藏；灰度值不会被当作 Alpha 解析
mask-mode: luminance 对图像内容敏感，亮度≠视觉明暗
luminance 模式把 RGB 转成灰度再映射为不透明度，但转换公式是标准化的（ITU-R BT.709），不是人眼感知的“亮/暗”：
- 纯红
#ff0000的亮度 ≈ 0.2126，比纯绿#00ff00（≈ 0.7152）暗得多，但人眼常觉得红更“抢眼” - 一张灰度图里
#808080（中性灰）会被转为 0.5 不透明度，刚好半透 —— 这是可预测的，但需提前校验 - Safari 对
mask-mode: luminance支持不稳定：部分版本会静默降级为alpha，或对 JPEG 遮罩渲染异常（出现色块、偏移）
如何验证 mask-mode 实际生效了
别只靠肉眼判断，用 DevTools 和最小化测试快速定位问题：
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome/Firefox 中右键元素 → “检查”，展开
Computed面板，搜mask-mode，确认值是alpha或luminance（不是match-source） - 临时把
mask-image换成一个已知结构的图：比如 2×2 像素图，左上白（#fff）、右上黑（#000）、左下灰（#808080）、右下透明（RGBA(0,0,0,0)），分别观察alpha和luminance下哪块显示/隐藏 - 加一行
mask-border: 1px solid red（仅调试），看遮罩边界是否贴合预期区域 —— 若错位，大概率是mask-size/mask-position未配合mask-mode调整
生产环境推荐策略：优先 alpha，luminance 必须带降级
除非明确需要 JPEG 遮罩或想利用亮度渐变做动态效果，否则默认走 mask-mode: alpha 更稳：
- 准备两套遮罩图：一套带 Alpha 的 PNG（用于
alpha），一套高对比度灰度 PNG（用于luminance降级备用） - CSS 中用层叠覆盖：
.masked { mask-image: url(mask-alpha.png); mask-mode: alpha; } @supports (mask-mode: luminance) { .masked { mask-image: url(mask-lum.png); mask-mode: luminance; } } - 避免在 Safari 中单独依赖
luminance：它对 SVG<mask>的mask-type解析也存在偏差，建议用mask-type="alpha"显式声明
最易被忽略的一点：mask-mode 不影响 mask-image 的加载或尺寸计算，只改变像素解释逻辑。所以即使遮罩图看着一样，alpha 和 luminance 下同一张图产生的蒙版形状可能完全不同 —— 动手前先用小图测亮度/Alpha 分布，比调样式更快。
