mask-image比opacity更适合透明渐变，因opacity使整个元素及子树变淡，而mask-image仅控制区域可见性且不干扰内部样式；其核心是用white-to-black线性渐变，需注意颜色语义、mask-size/mask-repeat设置及safari兼容性问题。
mask-image 为什么比 opacity 更适合做透明渐变
因为 opacity 是作用在整个元素及其子树上的，一旦设为半透明，里头的文字、边框、阴影全跟着变淡；而 mask-image 只控制“哪些区域可见”，不干扰内部样式。你要的是“右边慢慢消失”，不是“整个盒子发虚”——这就得用遮罩。
常见错误现象：mask-image: linear-gradient(to right, black, transparent) 写完没反应，或者渐变方向反了、元素直接看不见了。
关键原因有三个：
-
mask-image默认使用 alpha 通道，纯黑（#000）代表完全遮盖，纯白（#fff）代表完全显示，灰色是半透——别用transparent当遮罩色，它在 mask 中等价于黑色 - 必须配合
mask-size和mask-repeat控制渐变范围，否则默认平铺或缩放失真 - 部分旧版 Safari 需要
-webkit-mask-image前缀，且只支持单值写法（不能直接写linear-gradient）
怎么写一个从左到右淡出的 mask-image 渐变
核心是用白色到黑色的线性渐变，控制可见区域从左满显→右隐去。注意：起始是白，结束是黑。
实操建议：
- 基础写法：
mask-image: linear-gradient(to right, #fff, #000) - 限制宽度避免拉伸失真：
mask-size: 100% 100%（尤其当元素宽高不定时） - 禁用重复：
mask-repeat: no-repeat，否则渐变会 Tile - 确保 mask 定位贴左上：
mask-position: 0 0，不然可能切掉左边
完整示例：
div {
mask-image: linear-gradient(to right, #fff, #000);
-webkit-mask-image: linear-gradient(to right, #fff, #000);
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: 0 0;
}
mask-image 在不同浏览器里的兼容性坑
Safari 是最大变量：iOS 15.4+ 和 macOS Monterey 后才稳定支持 CSS mask-image 的 linear-gradient 值；更早版本只认 url() 或 radial-gradient（且不支持 color stop 位置偏移）。
容易踩的坑：
- Chrome / Firefox 支持无前缀
mask-image，但 Safari 仍需-webkit-mask-image - 不要写
mask: linear-gradient(...)—— 这是简写，会重置mask-size等其他属性，导致渐变失效 - 如果用了
backdrop-filter或transform，某些 Safari 版本会直接忽略 mask，得加isolation: isolate强制图层
替代方案：当 mask-image 不可用时怎么模拟透明渐变
不是所有场景都能用 mask-image，比如需要支持 IE 或老安卓 WebView。这时得退回到视觉欺骗方案。
可行做法：
- 用伪元素 +
background: linear-gradient盖在内容右侧，颜色设为父容器背景色（要求背景纯色或可控） - 用 SVG
<mask></mask>内联定义，通过mask-image: url(#myMask)引入——兼容性比 CSS gradient 好，但代码量翻倍 - 放弃 CSS，用 Canvas 绘制带渐变遮罩的图像（仅适用于静态图或简单动效）
注意：伪元素方案对文字溢出裁剪不精准，mask-image 才是真正按像素级 alpha 控制的唯一正解。
复杂点在于 mask 的颜色语义和 opacity 完全相反，而且 Safari 的实现细节至今没完全对齐标准——调的时候别只看 Chrome 效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
