CSS如何使用mask-image定义遮罩区域

CSS 的 `mask-image` 是实现精细视觉遮罩效果的利器，但实际开发中常因元素无宽高、未适配 Safari 的 `-webkit-mask-image` 前缀、或误与 `opacity` 混用而失效；本文直击三大高频坑点，详解如何用 CSS 渐变（推荐）或 SVG 安全定义遮罩、为何黑色显示内容而透明隐藏、以及如何规避浏览器兼容陷阱和渲染异常，帮你一次写对、处处生效。

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 内部 定义正确，且根元素有明确宽高（否则 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 。

好了，本文到此结束，带大家了解了《CSS如何使用mask-image定义遮罩区域》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！