mask-image没生效主要因三原因：元素无宽高、未设mask-mode或格式不兼容、inline元素未改display；需双写-webkit-mask-image适配Safari；避免与opacity混用。
mask-image 为什么没生效？检查这三件事
直接写 mask-image 却看不到遮罩效果，大概率是以下原因：
• 元素没有设置 width 和 height（或内容撑开尺寸），导致遮罩区域为 0×0；
• 没有设置 mask-mode 或使用了不支持的图像格式（如 WebP 在旧 Safari 中不被识别为遮罩源）；
• 元素本身是 inline 元素（如 span），未显式设为 display: block 或 inline-block。
mask-image 支持哪些值？优先用 CSS 渐变或 SVG
mask-image 接收 url()、linear-gradient()、radial-gradient()、conic-gradient() 或 none。实际项目中建议优先用 CSS 渐变，避免额外请求和跨域问题：
div {
mask-image: linear-gradient(to right, black 0%, transparent 100%);
}
注意：渐变方向与遮罩逻辑相反——黑色区域显示内容，透明区域隐藏内容。SVG 作为 url() 引入时，需确保 SVG 内部 <mask> 定义正确，且根元素有明确宽高（否则 Safari 可能渲染异常）。
Safari 下 mask-image 不兼容？补上 -webkit-mask-image
所有主流浏览器都支持 mask-image，但 Safari（包括 macOS 和 iOS）仍要求带前缀的 -webkit-mask-image 才能生效。只写标准属性等于白写：
立即学习“前端免费学习笔记（深入）”；
div {
-webkit-mask-image: url(mask.svg);
mask-image: url(mask.svg);
}
不需要写 -webkit-mask-mode 等其他前缀属性，现代 Safari 已支持无前缀版本，唯独 mask-image 必须双写。另外，Safari 对 mask-size 和 mask-position 的默认行为更严格，建议显式设置，例如：
mask-size: cover; mask-position: center;
遮罩和 opacity 混用会出问题？别让 mask 失效
给遮罩元素同时设置 opacity: 0.5，会导致整个元素（含遮罩效果）半透明，而不是“遮罩区域内透明”。更严重的是：某些旧版 Chrome（≤90）在 opacity + mask-image 同时存在时，会直接忽略遮罩。
如果需要叠加透明效果，改用 rgba() 填充遮罩图像（如渐变中用 rgba(0,0,0,0.7) 控制透光程度），或把遮罩层套在父容器里，让子元素独立控制透明度。
真正容易被忽略的是：遮罩图像本身是单通道灰度，浏览器只读取其亮度值。哪怕你用了 PNG 的 alpha 通道，在 mask-image 上也只当灰度图用——所以别指望靠 PNG 透明度微调遮罩边缘，得靠渐变缓动或 SVG <feGaussianBlur>。
