mask-image仅控制透明度而非颜色，文字颜色由背景层决定；正确实现需color: transparent、background-clip: text、mask-image配mask-mode: luminance，并注意Safari兼容性限制。
mask-image 本身不控制颜色，只控制透明度
很多人以为 mask-image: linear-gradient() 能直接让文字“变色”，其实它只决定哪些像素该透、哪些该挡——黑=不透明，白=透明，灰度值决定半透程度。文字最终显示什么颜色，取决于你给它塞了什么背景层。遮罩不是滤镜，它不染色，只开窗。
常见错误现象：mask-image: linear-gradient(to right, red, blue) 写完没反应，或者颜色发灰、边缘糊成一片。这是因为浏览器把红蓝渐变当作了 alpha 图像处理（尤其 Chrome），而 alpha 模式下只有透明度信息，红蓝被忽略为灰度，效果极弱。
- 必须显式加
mask-mode: luminance或mask-mode: alpha，不能依赖默认值（Safari 默认不生效） - 渐变里别用纯色名或变量色（如
red、var(--accent)），改用black/transparent或明确灰度值（rgb(0,0,0)/rgba(0,0,0,0)） - 如果想让文字区域透出底图，底图得设在文字容器上，而不是文字元素自身（
color: transparent后文字不占渲染层）
实现镂空文字+动态背景色的最小可行结构
核心是分层：一层做遮罩（mask-image），一层填色（background），文字本身只是“镂空模板”。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
.hollow-text {
font-size: 4rem;
font-weight: bold;
color: transparent;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
-webkit-mask-image: linear-gradient(to right, black, transparent, black);
mask-image: linear-gradient(to right, black, transparent, black);
-webkit-mask-mode: luminance;
mask-mode: luminance;
}
-
background设在文字元素上，靠background-clip: text贴合字形 -
mask-image的渐变方向必须和background一致，否则“窗”和“景”错位 - Safari 必须带
-webkit-前缀，且transparent不能写成rgba(0,0,0,0)（它不认） - 如果背景要动（比如渐变流动），只 animating
background-position，不要动mask-image——它不支持过渡
为什么不用 clip-path 或 text-stroke？
clip-path 是硬裁剪，边缘锐利无过渡；text-stroke 是描边+透明填充，本质是“空心字”，不是“透底镂空”。两者都无法实现中间渐隐、边缘柔化、或背景图穿透等高级效果。
典型场景差异：
- 要做「标题撕纸露出底图」效果 → 必须用
mask-image+ 底层background-image - 只要「白色描边黑字」且兼容 IE → 用
-webkit-text-stroke: 2px white - 需要精确几何裁剪（比如六边形文字框）→
clip-path: polygon(...)更轻量 - 想让文字随滚动淡入淡出 → 用伪元素叠
linear-gradient层，比 mask 更稳定
容易被忽略的 Safari 兼容细节
Safari 对 mask-image 的限制比 Chrome 严格得多，很多看似能跑的代码在 iOS/macOS 上直接空白。
- 不支持
radial-gradient和conic-gradient作遮罩，只认linear-gradient -
mask-size必须设为cover或100% 100%，否则默认缩放导致遮罩只盖左上角 - 单位不能省略：写
70%可以，写70就失效 - 不能用 CSS 变量动态替换
mask-image的值（mask-image: var(--mask)不工作），换效果只能切 class 或 JS 改style.maskImage
最稳妥的做法：始终双写 -webkit-mask-image 和 mask-image，所有渐变值用 black/transparent，所有尺寸带单位，所有 mask 属性显式声明。
