mask-image 必须配合 mask-size、mask-repeat 等显式设置才有效，仅写 url() 无效；需双前缀（-webkit-mask-image + mask-image），灰度逻辑为白显黑隐，渐变蒙版兼容性差，SVG mask 更稳妥。
直接写 mask-image 基本无效——不配 mask-size、mask-repeat 和前缀，浏览器根本不会按你预期渲染。
为什么 mask-image: url(logo.png) 完全没反应
不是图片路径错了，也不是 CSS 没生效，而是浏览器默认把蒙版图缩放到 0×0 或原尺寸平铺，而蒙版区域又默认覆盖整个盒模型（含 padding/border），结果就是：要么看不见，要么满屏乱码拼贴。
-
mask-size必须显式设，比如cover、100% 100%或具体像素值；auto在各浏览器行为不一致，等同于没设 -
mask-repeat默认是repeat，小图标会密密麻麻铺满，一般得强制写成no-repeat -
mask-position默认居中，但若容器宽高比和蒙版图不匹配，cover会裁边，这时得换contain或手动调mask-position: top left - 别信“
mask-source”，它不是标准属性，是旧 Safari 的私有前缀，已弃用；现在只认mask-image
mask-image 能用哪些值？灰度逻辑必须搞清
mask-image 只接受 url()（PNG/SVG）、linear-gradient()、radial-gradient()、conic-gradient()，不能写颜色值或 none（那是默认值）。
- 灰度解释规则：纯白（
#fff或 alpha=1）= 显示内容，纯黑（#000或 alpha=0）= 完全隐藏，灰色 = 按透明度比例混合 - 用 PNG 做蒙版时，Alpha 通道必须有效；Photoshop 导出要勾选“透明度”，Figma 要选 “Include alpha”
- 渐变写法跨浏览器极不稳定：
linear-gradient(to bottom, black, transparent)在 Firefox 中被忽略，在 Safari 中transparent被转成#000→ 全显；稳妥写法是linear-gradient(to bottom, #000, #fff) - SVG
<mask>元素需通过mask-image: url(#myMask)引用，不是写成mask-source或直接内联
为什么写了 mask-image 却啥都没显示
因为 mask-image 不提供颜色、不自带背景——它只控制“哪里透、哪里不透”。没内容、没背景，蒙版再准也是一片空。
立即学习“前端免费学习笔记（深入）”；
- 别对
<img>标签直接加mask-image；应把图片设为background-image，再对容器应用 mask，否则 mask 会作用在 img 元素的盒模型上（含外边距、边框），不是图像本身 - 确保容器有明确宽高或可计算尺寸；响应式图片（
height: auto）下，若父容器没高度，伪元素或 mask 都会塌陷 - 想实现“深色半透明遮罩”这种视觉效果，
mask-image是错路——那是::after+rgba()或linear-gradient()的事，真遮罩只管 Alpha 裁切 - Safari 对
file://协议和 CORS 限制严格，本地测试 PNG 蒙版失败，大概率是协议问题，不是代码问题
兼容性怎么写才不至于上线就崩
2026 年中，mask-image 仍处于“双前缀刚需”阶段：Firefox 原生支持，Chrome/Safari 必须靠 -webkit-mask-image 才触发渲染。
- 必须同时写：
-webkit-mask-image: ...和mask-image: ...；只写后者，Chrome/Safari 直接静默失效 - 避免用
mask简写（如mask: url() / cover no-repeat），各浏览器解析差异大，建议拆开写mask-image、mask-size、mask-repeat、mask-position - 渐变蒙版在 Firefox 中目前仍不支持，若需全浏览器可用，优先用 SVG
<mask>引用，或降级为伪元素方案 - 动画 mask（如滑入渐显）可用，但
@keyframes中只能改mask-position或mask-size，不能动画mask-image本身
真正麻烦的从来不是“怎么写 mask”，而是“怎么让同一段代码在 Chrome、Safari、Firefox 里都干同一件事”——灰度逻辑、前缀依赖、渐变支持、CORS 限制，每个点都可能单独翻车。别省那几行前缀，也别迷信“现代浏览器”宣传，2026 年了，-webkit- 还是刚需。
