mask-image + linear-gradient 是唯一适配复杂背景的渐变消失方案，因它直接控制透明度通道，而 background-clip:text 仅能变色不能变透明；firefox 需 fallback，safari 需 mask-size 显式声明，且 mask 黑白含义与 svg 相反。
mask-image + linear-gradient 是目前唯一能真正适配复杂背景（图片、多层渐变、滚动背景）的渐变消失方案，但 Firefox 仍不支持 mask-image，必须 fallback。
为什么 mask-image 比 background-clip 更适合“渐变消失”
background-clip: text 本质是把文字当蒙版显示背景，它只能让文字“变色”，不能让文字“变透明”。而渐变消失需要的是文字从清晰 → 半透明 → 完全不可见，这属于遮罩（masking）范畴。mask-image 直接定义透明度通道，不受背景颜色干扰——哪怕父容器背景是一张滚动的 JPG 或 radial-gradient，只要 mask 渐变方向和位置对得上，就能精准控制文字尾部的透明衰减。
常见错误现象：background: linear-gradient(90deg, transparent, #fff); background-clip: text; 在图片背景上会漏出白色块，因为那不是“透明”，而是“画了一层白底”。
使用场景：
- 卡片内多行文本底部渐隐（如新闻摘要“查看全文”）
- 横向滚动文案两端淡入淡出（如标签栏、时间轴）
- 背景为
background-image: url(...)或background: conic-gradient(...)的容器中
正确写法：mask-image + 线性渐变 + 兼容降级
核心是用 mask-image 指向一个 linear-gradient，方向与消失方向一致，并确保 mask 尺寸贴合内容区域。
实操建议：
- 对块级容器（如
p、div）设position: relative，再用::after伪元素承载 mask，避免影响文本流 - mask 渐变必须用
transparent开头/结尾，不能用rgba(0,0,0,0)—— Safari 对后者解析不稳定 - Firefox 不支持
mask-image，必须加-webkit-mask-image前缀，且需同时提供mask-border或mask-composite降级逻辑（实际常用opacity或纯色 fallback） - 移动端 iOS Safari 要求
mask-size: 100% 100%显式声明，否则可能拉伸失真
简短示例（多行文本底部渐隐）：
.fade-text {
position: relative;
line-height: 1.6;
overflow: hidden;
}
.fade-text::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8));
-webkit-mask-image: linear-gradient(to bottom, transparent, black);
mask-image: linear-gradient(to bottom, transparent, black);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
pointer-events: none;
}
容易踩的坑：mask-position、滚动背景、高对比度模式
mask-image 默认以元素边界为参考系，不是以内容盒（content-box）或文字基线。当容器有 padding 或文字有 line-height 时，mask 很容易偏移。
关键参数差异：
-
mask-position: bottom≠bottom: 0：前者是 mask 图像在元素内的定位，后者是伪元素位置；两者要协同调整 - 滚动背景下，mask 不会随内容滚动 —— 必须用
mask-attachment: local（仅 Chrome/Safari 支持），否则 mask 固定在容器视口上 - Windows 高对比度模式下，
mask-image会被忽略，文字直接全显；此时需配合@media (forced-colors: active)强制设color: CanvasText并禁用 mask - 不要对
mask-image使用!important，它会覆盖掉mask-composite: add等合成行为，导致多层 mask 失效
最易被忽略的一点：mask 的黑白色含义和 SVG mask 相反 —— 白色（#fff）代表完全可见，黑色（#000）代表完全透明，灰度值决定 alpha。写成 linear-gradient(to bottom, white, black) 才是“顶部清晰→底部消失”，写反就全黑了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
