mask-image渐隐没反应，主因是元素无背景内容可遮；需为容器设background、文字用color:transparent+background-clip:text、图片改用background-image；渐变须用#fff/#000，禁用transparent；safari需-webkit前缀，firefox不支持渐变值；必配mask-size、mask-repeat、mask-position。
mask-image 渐隐没反应？先确认元素有内容可遮
写了 mask-image: linear-gradient() 却完全看不到效果，大概率不是语法错，而是元素本身没东西可遮。mask-image 只作用于元素的绘制内容——主要是 background 和 border，对纯文字（color）或空 <img> 默认无效。
- 对图片：别直接给
<img>加mask-image，它会套在 img 元素外框上，而不是图像内容本身；正确做法是把图片设为容器的background-image，再对容器应用mask-image - 对文字：必须配合
color: transparent+background-clip: text+-webkit-background-clip: text，把文字“转成背景”才能被遮罩控制 - 对普通 div：至少要显式设置
background: #000或background: linear-gradient(...)，否则遮罩区域虽存在，但底下是透明的，看起来就像没生效
渐变方向写反了？记住：白显黑隐，不是黑显白隐
mask-image 的灰度逻辑和直觉相反：纯白 #fff 表示“完全显示”，纯黑 #000 表示“完全隐藏”，中间灰阶控制过渡强度。写成 linear-gradient(to right, black, transparent) 在 Safari 里会静默失效（transparent 被转成 #000），在 Firefox 里直接被忽略。
- 从左到右淡出（左边显、右边隐）：用
linear-gradient(to right, #fff, #000) - 从上到下渐隐（顶部显、底部隐）：用
linear-gradient(to bottom, #fff, #000) - 别用
black/white别名——Safari 解析不稳定，#000和#fff才真正可靠 - 想控制淡出长度？改渐变色标位置，比如
linear-gradient(to right, #fff 70%, #000 100%)，让可见区占前 70%
Safari 和 Firefox 都不认同一套写法，必须分情况处理
截至 2026 年中，三大浏览器对 mask-image 渐变的支持仍是割裂的：Chrome/Edge 需前缀才动，Safari 只吃灰度值，Firefox 完全不支持渐变值。只写一套 CSS 必然漏掉至少一个主流环境。
- Safari（含 iOS）：必须双写
-webkit-mask-image和mask-image，且值完全一致；渐变只能用#000/#fff/#808080，禁用transparent和rgba() - Firefox：无视所有
linear-gradient()声明，唯一兼容方案是内联 SVG：mask-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><mask id="m"><lineargradient y2="1"><stop offset="0" stop-color="black"></stop><stop offset="1" stop-color="white"></stop></lineargradient></mask></svg>#m") - Chrome/Edge：即使新版 Blink 内核，也建议始终双写前缀，避免渲染异常；不加
-webkit-mask-image时可能静默不触发
mask-size 和 mask-position 不设等于白写
mask-image 只定义“图案”，不决定“盖在哪”。默认情况下，渐变会平铺（mask-repeat: repeat），且尺寸按原始渐变逻辑缩放（mask-size: auto），结果常是整个元素被一刀切或反复条纹化。
- 强制覆盖全元素：加
mask-size: 100% 100%，尤其当容器宽高不定（如响应式图片）时，这步不能省 - 禁用平铺：加
mask-repeat: no-repeat，否则渐变会在水平/垂直方向重复出现 - 精确定位起点：加
mask-position: 0 0，确保渐变左上角对齐元素左上角；若想从右往左淡出，可设mask-position: 100% 0配合to left渐变 - 别用
mask简写——它会重置mask-size、mask-repeat等，默认行为不可控
aspect-ratio、背景内容已就位、双写前缀渐变、手动设 mask-size/mask-repeat/mask-position。少一个，就可能在某个设备上彻底消失。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
