CSS文字渐变消失：mask-image线性渐变实现

实现文字尾部渐变消失效果时，背景常为复杂的图片或渐变。许多开发者的第一反应是使用 background-clip: text，但结果往往是文字尾部并未变透明，反而露出白底。问题在于 background-clip 只能让文字借用背景颜色，无法让文字本身变透明。真正能直接控制透明度通道的是 mask-image 配合 linear-gradient。这套组合是目前唯一能在复杂背景（如图片、多层渐变、滚动背景）下实现文字渐变消失的方案，但浏览器兼容细节较多，需要谨慎处理。

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) 可实现“顶部清晰→底部消失”，写反则全部变黑。