mask-image渐隐遮罩需同时满足四点：纯灰度渐变、双写mask-image与-webkit-mask-image、显式设置mask-size为100% 100%或cover、mask-repeat设为no-repeat，缺一不可。
直接用 mask-image: linear-gradient() 做渐隐遮罩，大概率在 Firefox 里完全失效、在 Safari 里全显、在 Chrome 里要加前缀才动——不是你代码写错，是浏览器根本没按同一套规则解析。
为什么 mask-image: linear-gradient(to bottom, black, transparent) 在不同浏览器表现完全不同
这不是 bug，是标准落地差异：Firefox（截至 2026 年中）压根不支持渐变作为 mask-image 的值，整条声明被忽略；Safari 把 transparent 当作 #000 处理，结果整个遮罩变成“全黑→全显”；Chrome/Edge 虽支持，但必须写 -webkit-mask-image 才触发渲染，只写标准属性会静默跳过。
-
transparent和rgba()在 Safari 中无效，会被降级为#000，导致遮罩失效 - Firefox 不解析任何渐变值，
mask-image回退到none，等同于没加 - Chrome/Edge 需同时写
mask-image和-webkit-mask-image，否则不生效 - 灰度逻辑必须严格：只认
#000（隐藏）、#fff（显示）、中间灰阶（半透），其他颜色值行为不可控
mask-image 渐隐写法必须满足的硬性条件
想让渐隐真正起作用，四点缺一不可：
- 渐变必须用纯灰度色：例如
linear-gradient(to bottom, #000, #fff)，而不是black/transparent - 必须双写：
mask-image+-webkit-mask-image，不能只写其一 -
mask-size必须显式设为100% 100%或cover，auto在各浏览器行为不一致 -
mask-repeat必须设为no-repeat，否则小渐变会平铺成条纹
示例有效写法：
.fade-out {
-webkit-mask-image: linear-gradient(to bottom, #000, #fff);
mask-image: linear-gradient(to bottom, #000, #fff);
mask-size: 100% 100%;
mask-repeat: no-repeat;
}
别对 <img> 直接应用 mask-image
mask-image 作用于整个元素盒模型，包括 padding、border，甚至 margin（若参与 layout）。对 <img> 标签直接加，遮罩会套在 img 元素外框上，而不是图像内容本身——尤其当图片是响应式（height: auto）且父容器无明确高度时，遮罩区域可能塌陷为 0×0。
- 正确做法：把图片设为容器的
background-image，再对容器应用mask-image - 容器必须有可计算尺寸（如
width+height，或aspect-ratio），否则 mask 区域不可控 - 若用伪元素模拟遮罩（如
::after叠linear-gradient()），那只是视觉叠加，不具备 alpha 裁切能力，无法实现文字镂空、软边裁剪等真遮罩效果
渐隐遮罩真正适用的场景和替代方案
如果你只需要“顶部深色、向下渐变透明”的视觉层叠效果，mask-image 是重武器——它解决的是“哪里该透、哪里该裁”，不是“盖一层什么颜色”。多数所谓“渐隐遮罩”需求，其实用 background: linear-gradient(...), url(...) 或 ::after 叠层更轻量、更兼容。
- 真需要
mask-image的场景：文字镂空露出背景图、SVG 路径动态裁剪、带软边的非矩形动画入场 - 渐隐类 UI 效果（如卡片底部模糊收口）：优先用
background-blend-mode或伪元素 +opacity动画 - 兼容性底线：若需支持 Firefox 或旧 Safari，SVG
<mask></mask>元素引用（mask-image: url(#myMask)）仍是目前最稳妥的方案
灰度逻辑、双前缀、尺寸控制、内容载体——漏掉任意一个，mask-image 就只是 CSS 文件里一行安静的注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
