mask-image渐变不生效主因是元素无背景内容，需显式设置background；文字遮罩需color:transparent+background-clip:text；safari须用-webkit-mask-image且渐变终点写transparent；mask-size与mask-position配合控制渐隐范围。
mask-image 渐变不生效？先检查 background 是否存在
写了 mask-image: linear-gradient() 却没反应，大概率不是语法错，而是元素压根没东西可遮。 mask-image 只作用于元素的绘制内容——主要是 background 和 border，对纯文字（color）默认无效。
常见错误现象：div 或 p 直接套 mask，但背景是 transparent 或未声明，结果整个区域看起来“完全没遮罩”。
- 必须显式设置
background：哪怕只是background: #000或background: linear-gradient(...) - 若目标是遮文字本身，得先把文字转成“背景”：用
color: transparent+background-clip: text+-webkit-background-clip: text - Firefox 不支持
mask-image，此时需 fallback 到opacity或降级为纯色
Safari 中 mask-image 必须加 -webkit- 前缀且渐变终点写 transparent
Safari（包括 iOS 15.4+ 和 macOS Monterey 后版本）仍依赖 -webkit-mask-image 才能稳定解析 linear-gradient。即使你写了标准 mask-image，Safari 也可能静默忽略。
更隐蔽的坑是渐变终点写法：rgba(0,0,0,0) 在 Safari 中不被识别为有效透明通道，必须用字面量 transparent。
- ✅ 正确：
-webkit-mask-image: linear-gradient(to right, black, transparent) - ❌ 无效：
-webkit-mask-image: linear-gradient(to right, black, rgba(0,0,0,0)) - 方向要匹配文字排布：横排常用
to right，竖排用to bottom - 现代 WebKit 已支持不加
url()包裹的渐变，但加了也不报错，兼容旧版更稳
实现“文字渐变消失”效果的关键是 mask-size 和 mask-position 配合
想让一段文字从左到右逐渐淡出（比如“查看全文…”提示），光靠 mask-image 不够，它只定义遮罩“图案”，不控制“覆盖范围”。真正决定哪部分文字被遮、哪部分可见的是 mask-size 和 mask-position。
例如，要实现从左滑入的渐隐动画，需要让遮罩宽度大于内容，并通过位移控制露出区域：
-
-webkit-mask-size: 200% 100%：让渐变遮罩水平拉伸为文字宽度的两倍 -
-webkit-mask-position: -100% 0：初始时遮罩完全偏左，文字全显；动画中移到0 0，右侧渐隐就出现了 - 务必同时声明
mask-size: 100% 100%和-webkit-mask-size: 200% 100%，否则 iOS Safari 可能拉伸失真 - 不要用
mask-repeat: no-repeat—— 它对渐变无效，mask-size才是关键
mask-image 和 background-clip:text 的本质区别不能混淆
很多人试图用 background-clip: text 实现“渐变透明”，这是行不通的。background-clip 只是把背景“贴”到文字形状上，它改变的是颜色来源，不是透明度。文字始终是“不透明的剪裁轮廓”，无法实现从实色 → 半透 → 全透明的衰减。
而 mask-image 是直接操作 alpha 通道，哪怕背景是一张滚动的 JPG 或多层 conic-gradient，只要遮罩渐变方向对齐，就能精准控制每一像素的透明度。
- 适用
background-clip: text：静态背景下的文字填色（如深色页上用渐变色显示标题） - 必须用
mask-image：复杂背景、滚动背景、需要真正“渐隐/镂空/波浪流动”的场景 - 两者可组合：先用
background-clip: text填色，再用-webkit-mask-image控制该颜色区域的透明度分布
最易被忽略的一点：mask-image 的黑白含义和 SVG mask 相反——在 CSS 中，遮罩里的黑色代表“隐藏”，白色代表“显示”，灰色是半透。别按 SVG 直觉去调色阶，否则效果会反转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
