mask-image实现图片渐隐遮罩需同时满足四条件：纯灰度渐变、双写-webkit-mask-image和mask-image、mask-size设为100% 100%或cover、mask-repeat设为no-repeat；且须作用于有明确尺寸的容器而非img标签。
mask-image 实现图片渐隐遮罩，不是写个 linear-gradient(to bottom, black, transparent) 就完事——浏览器解析规则不统一，漏掉任一约束条件，效果就直接消失或错位。
为什么 mask-image: linear-gradient() 在 Firefox/Safari/Chrome 表现完全不同
这不是你代码写错，是标准落地差异：
- Firefox（截至 2026 年中）完全不支持渐变作为
mask-image的值，整条声明被忽略，等效于mask-image: none - Safari 把
transparent或rgba()当作#000处理，导致“全黑→全显”，渐隐失效 - Chrome/Edge 虽支持，但只写标准属性
mask-image会静默跳过，必须同时写-webkit-mask-image - 灰度逻辑必须严格：只认
#000（隐藏）、#fff（显示）、中间灰阶（如#808080对应 50% 透明），其他颜色值行为不可控
渐隐遮罩必须满足的四个硬性条件
缺一不可，否则在任意主流浏览器都可能出问题：
- 渐变必须用纯灰度色：例如
linear-gradient(to bottom, #000, #fff)，不能用black/transparent/rgba() - 必须双写：
-webkit-mask-image和mask-image都得有，顺序无所谓，但不能只写其一 -
mask-size必须显式设为100% 100%或cover；auto在各浏览器行为不一致，尤其 Safari 下常塌陷 -
mask-repeat必须设为no-repeat；默认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），不是图像内容本身。对响应式 <img> 直接应用，极易因高度未定义导致遮罩区域为 0×0，视觉上“没效果”。
- 正确做法：把图片设为容器的
background-image，再对容器应用mask-image - 容器必须有可计算尺寸：至少设置
width+height，或使用aspect-ratio，否则遮罩区域不可控 - 伪元素模拟（如
::after叠linear-gradient）只是视觉叠加，不具备 alpha 裁切能力，无法实现真渐隐
滚动区域加渐隐遮罩的常见翻车点
想做“横向滚动图片列表+左右边缘渐隐”，最容易踩的坑是遮罩跟着滚动：
- 错误：把
mask-image加在滚动容器（如.scroll-area）上 → Safari 下遮罩随内容滚动，边缘始终不固定 - 正确：外层容器设
overflow: hidden并应用mask-image；内层滚动容器单独设overflow-x: auto，且不加任何 mask 属性 - 渐变方向建议用
to right或to left，并控制过渡区间，例如：linear-gradient(to right, #000 0%, #fff 15%, #fff 85%, #000 100%)，留出左右各 15% 渐变区 - Safari 15.4+ 才支持 CSS gradient 形式的
mask-image，旧版需降级为全显或用 SVG 遮罩
真正起作用的渐隐，从来不是“写对一个属性”，而是四点齐备 + 容器可控 + 浏览器兜底意识——尤其是 transparent 和 black 这类语义化关键词，在 mask 场景下几乎等于陷阱。
