mask-image本身不填色，颜色由background决定；必须配合background-color或background-image才能显示颜色，且需确保遮罩图为单通道、设mask-mode: alpha、加-webkit前缀并避免repeat/size误配。
mask-image 本身不填色，颜色来自 background
直接写 mask-image: url(icon.svg) 并不会让图标变红或变蓝——它只决定“哪里能透出颜色”，真正显示什么色，由元素自身的 background-color 或 background-image 决定。这是最容易误解的点，很多人写了 mask 却没设 background，结果页面一片空白。
常见错误现象：
-
mask-image加了但图标完全不显示 → 没配background，或者 background 是 transparent - 图标显示为灰色/发虚 → PNG 图标不是纯黑+透明底，而是带抗锯齿灰边，且没设
mask-mode: alpha - 颜色随主题切换失败 → 用了
currentColor但 SVG 是引入，或没在 SVG 里把
fill写成currentColor
单色 PNG 图标换色必须满足三个硬条件
想用 PNG 做 mask 换色，不是丢个图就完事。浏览器读的是 Alpha 通道，不是 RGB 颜色值。原始图必须是：
- 背景全透明（不是白色！用 eyedropper 在 DevTools 里点一下，Alpha 值得 > 0）
- 图形区域为纯黑（
#000）或纯白（#fff），不能有灰阶过渡（否则会被当半透处理） - 显式声明
mask-mode: alpha—— 不加这句，Chrome 默认用 luminance 模式，黑图标可能被当成全透明
最小可行写法：
icon {
width: 24px;
height: 24px;
background-color: #3498db;
mask-image: url(icon.png);
-webkit-mask-image: url(icon.png);
mask-mode: alpha;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
SVG 作为 mask 时，currentColor 才能动态继承
如果要用文字颜色自动驱动图标色（比如按钮文字变红，图标也变红），必须让 SVG 的 fill 是 currentColor，且不能用 标签引入——
是独立上下文，
currentColor 失效。
正确做法只有两种：
- 内联 SVG：
<svg fill="currentColor"><path d="..."></path></svg>，然后套一层 div 控制 size 和 background - CSS 中用 data URL：
mask-image: url("data:image/svg+xml,%3Csvg...fill='currentColor'%3E");，注意#要编码成%23，否则解析失败
Safari 必须加 -webkit-mask-image 前缀，iOS Safari 15.4+ 才支持，更老版本直接 fallback 到 background-image。
别踩这些坑：mask-size、repeat 和 Safari 兼容性
mask 默认行为很反直觉：
-
mask-size不设的话，小 SVG 可能缩成一个点；推荐用contain（完整居中）而不是cover（可能裁切） -
mask-repeat默认是repeat，一个 16×16 的 icon.svg 会平铺满整个 div，看起来像噪点——必须写no-repeat - Safari 对
mask-mode: alpha支持不稳定，某些版本下transparent写成rgba(0,0,0,0)就失效，得用关键字transparent - 父元素用了
transform或will-change，部分 Chrome 版本会禁用 mask 渲染，临时方案是加backface-visibility: hidden
最麻烦的其实是调试：DevTools 里看不出 mask 是否生效，只能靠删掉 background 看是否变全黑，再补 background 看颜色是否透出来——没有中间态，要么全透，要么全挡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
