mask-image渐隐需四条件：纯灰度渐变、双写-webkit/标准属性、mask-size设100%或cover、mask-repeat设no-repeat；直接作用于img易失效，应改用背景图容器；响应式需媒体查询重写全部规则。
mask-image 做渐隐图片，不是写个 linear-gradient(to bottom, transparent, black) 就完事——浏览器根本没在用同一套规则解析它。Firefox 会直接忽略整条声明，Safari 把 transparent 当 #000 处理导致全显，Chrome/Edge 不加 -webkit-mask-image 就静默失效。
为什么 mask-image: linear-gradient() 在不同浏览器表现完全不同
这不是 bug，是标准落地差异：
- Firefox（截至 2026 年中）压根不支持渐变作为
mask-image的值，整条声明被忽略，回退为none - Safari 把
transparent和rgba()当作#000处理，结果遮罩变成“全黑→全显”，渐隐消失 - Chrome/Edge 虽支持，但必须双写
mask-image和-webkit-mask-image，只写标准属性会被跳过 - 灰度逻辑必须严格：只有
#000（隐藏）、#fff（显示）、中间灰阶（半透）才可控；其他颜色值行为不可预测
渐隐遮罩必须同时满足的四个硬性条件
缺一不可，否则在某个浏览器里就失效：
- 渐变必须用纯灰度色：
linear-gradient(to bottom, #000, #fff)，不能用black/transparent - 必须双写：
-webkit-mask-image+mask-image，顺序无所谓，但两个都得有 -
mask-size必须显式设为100% 100%或cover；auto在各浏览器行为不一致，常导致遮罩区域塌陷 -
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;
}
别对 ![]()
标签直接加 mask-image
mask-image 作用于整个元素盒模型（含 padding、border），不是图像内容本身。对 <img> 直接应用，尤其当它是响应式（height: auto）且父容器无明确高度时，遮罩区域可能计算为 0×0，结果什么也不显示。
- 正确做法：把图片设为容器的
background-image，再对容器应用mask-image - 该容器必须有可计算尺寸（如显式
width+height，或aspect-ratio），否则 mask 区域不可控 - 伪元素模拟（如
::after叠linear-gradient()）只是视觉叠加，不具备 alpha 裁切能力，无法实现真渐隐边缘或文字镂空
响应式渐隐方向切换要靠媒体查询 + 重写 mask-image
不能指望单条渐变自动适配屏幕方向。大屏常用横向遮罩（to right）避免干扰主体内容，小屏改用纵向（to bottom）更符合手指滑动习惯：
@media (max-width: 768px) {
.fade-out {
-webkit-mask-image: linear-gradient(to bottom, #000, #fff);
mask-image: linear-gradient(to bottom, #000, #fff);
}
}
@media (min-width: 769px) {
.fade-out {
-webkit-mask-image: linear-gradient(to right, #000, #fff);
mask-image: linear-gradient(to right, #000, #fff);
}
}
注意：每次切换都要重新指定全部四条规则（双写、mask-size、mask-repeat），不能只覆盖 mask-image —— 浏览器不会继承未声明的 mask 子属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
