如何让CSS mask属性在Webkit与火狐中完全一致-css教程-PHP中文网

Firefox完全忽略-webkit-mask-image且不支持渐变或外部SVG，Safari则只认-webkit-mask-image；必须双写且顺序为先-webkit-mask-image后mask-image，值须用内联SVG data URL或#fff/#000灰度，禁用transparent及渐变。

如何让css mask属性在webkit与火狐中完全一致

为什么只写 `mask-image` 在 Firefox 和 Safari 里表现完全不同

根本不是“写对了就该一样”，而是两套引擎解析逻辑彻底割裂：Firefox 完全忽略 -webkit-mask-image，且至今（2026 年中）不支持任何渐变或外部 SVG URL 作为 mask-image 值；Safari 则完全不认标准 mask-image，必须靠 -webkit-mask-image 驱动。哪怕你双写、顺序正确，只要值本身跨浏览器不兼容（比如用了 transparent 或 linear-gradient()），结果就是 Safari 显示、Firefox 静默失效。

必须双写且顺序固定：`-webkit-mask-image` 在前，`mask-image` 在后

这不是可选项，是强制规则。浏览器按 CSS 级联取最后一个有效声明，但 WebKit 浏览器（Safari/Chrome）对标准属性存在解析 bug，若标准属性在前、前缀在后，Safari 可能跳过它；而 Firefox 忽略前缀，只认后面的 mask-image。所以正确顺序只能是：

.masked {
  -webkit-mask-image: url("mask.svg");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E%3Ccircle%20cx='50'%20cy='50'%20r='40'%20fill='%23ffffff'/%3E%3C/svg%3E");
}

mask.svg 必须是纯白图形（fill="#fff"）、透明背景，且不能含或 clipPath
Firefox 不支持外部 SVG，所以 mask-image 必须用 data URL 内联，且所有颜色编码为 %23ffffff（即 #fff），禁用 black 或 currentColor
如果用 PNG，iOS Safari 会因色彩配置文件（如 Adobe RGB）直接渲染为黑块，必须用 convert mask.png -strip mask-clean.png 剥离元数据

渐变遮罩别碰 `linear-gradient()`，改用内联 SVG

写 mask-image: linear-gradient(to bottom, #000, #fff) 看似简洁，实则三端全崩：Safari 把 #000 当“全显”、Firefox 直接忽略整条声明、Chrome 需要前缀才动。真正跨浏览器可靠的方案是 SVG 元素 + url(#id) 引用：

<svg width="0" height="0"><defs><mask id="fadeMask"><lineargradient id="grad" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23000000"></stop><stop offset="1" stop-color="%23ffffff"></stop></lineargradient><rect width="100%" height="100%" fill="url(%23grad)"></rect></mask></defs></svg>

然后 CSS 中引用：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

.faded {
  -webkit-mask: url(#fadeMask);
  mask: url(#fadeMask);
}

必须是十六进制（%23000000），禁用 rgba()、transparent 或别名
SVG 根元素不能设死 width/height（如 width="200"），否则 Safari 会无视 mask-size: cover
必须同时声明 -webkit-mask 和 mask，且都指向同一 url(#id)

响应式遮罩必须配 `mask-size: cover` + `mask-position: center`

mask-size: contain 在小屏上常留白，因为它是“完整显示遮罩图”，而遮罩图尺寸固定；cover 才是“填满容器并裁切”，配合 center 确保关键区域始终可见。但这个组合生效有前提：

若遮罩图是 PNG，宽高比必须与目标容器一致，否则 cover 会裁掉边缘内容
SVG 遮罩天然适配，但需确保其根元素无硬编码尺寸，且内部图形用 fill="#fff"
mask-origin 和 mask-clip 必须显式设为 border-box，否则 Firefox 可能按 content-box 解析导致偏移
给加遮罩时，务必设 display: block，否则 Safari 可能因 inline 元素尺寸未计算导致 mask 不触发