能实现，但必须双写 mask-image 和 -webkit-mask-image，渐变终点只能用 transparent，且图片必须有显式 background 或自身是 img 元素——否则遮罩无效果。
直接结论：能实现，但必须双写 mask-image 和 -webkit-mask-image，渐变终点只能用 transparent，且图片必须有显式 background 或自身是 <img> 元素——否则遮罩无效果。
为什么写了 mask-image: linear-gradient() 却没反应
不是代码写错，而是遮罩没东西可作用。CSS mask-image 只控制元素「已绘制内容」的透明区域，它本身不提供颜色或图像。
- 如果对一个空
div直接设mask-image，又没设background，那整个区域就是透明的，看起来像“没生效” -
<img>标签天然带内容，所以可直接加遮罩；但div必须显式设置background-image或background-color - 常见错误：用
background: transparent—— 这等于告诉浏览器“这里没内容”，遮罩自然无效
mask-image 渐变写法在各浏览器的真实表现
不同浏览器对渐变值的解析逻辑完全不同，不能只靠标准语法。
- Safari（iOS 15.4+ / macOS Monterey+）：只认纯灰度色，
black→ 全显，white→ 全隐，transparent→ 被转为#000（全显），所以终点必须写transparent，且必须用-webkit-mask-image - Firefox（2026 年中）：仍完全忽略
mask-image: linear-gradient()声明，整条规则被丢弃，降级为无遮罩 - Chrome/Edge：支持良好，但旧 Blink 内核需
-webkit-mask-image才触发渲染；仅写标准属性可能静默失效 - 正确写法示例：
img {<br> -webkit-mask-image: linear-gradient(to right, black, transparent);<br> mask-image: linear-gradient(to right, black, transparent);<br>}
图片遮罩要生效，必须满足这三个条件
缺一不可，漏掉任意一个都会导致“看起来没效果”。
- 元素必须有宽高：
<img>自带尺寸，但div需设width/height或由内容撑开 - 遮罩源必须有效：渐变方向与预期遮罩方向一致（比如
to right表示从左到右渐隐），且色值符合浏览器要求（Safari 不接受rgba(0,0,0,0)） - 避免和
opacity混用：两者叠加会破坏遮罩的 Alpha 控制逻辑，视觉上出现双重透明，难以调试
最易被忽略的一点：Safari 对 file:// 协议下本地 HTML 的 mask-image 有严格 CORS 限制，开发时建议用本地服务器启动，而不是直接双击打开文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
