mask-image在Less中不生效的三大原因：①漏写-webkit-mask-image前缀；②PNG无Alpha通道或SVG未设mask-mode:luminance；③Less不支持变量拼接url，须手动双写且顺序固定。
mask-image 在 Less 中不生效的三个常见原因
直接写 mask-image: url(...) 没效果，不是 Less 语法错，而是浏览器层卡住了。最常踩的坑是：① 只写了 mask-image，漏掉 -webkit-mask-image；② 遮罩图用 PNG 却没导出 Alpha 通道（设计工具常默认丢掉）；③ SVG 遮罩里混了颜色或渐变，但没设 mask-mode: luminance（而 alpha 模式仅 Firefox 支持）。Safari 15.4+ 和 Chrome 53+ 虽已支持标准属性，但 WebKit 内核仍强依赖前缀，且 Less 编译器完全不补。
必须同时声明 -webkit-mask-image 和 mask-image
不能靠 Autoprefixer 自动补全——它在 Less 构建链中对 mask-image 的识别极不可靠，尤其当未启用 supports 插件时。实操上只有一条路：手动双写，且顺序固定：
-
-webkit-mask-image必须放在前面，mask-image紧跟其后（浏览器会优先取后者，前者纯兜底） - 遮罩图路径必须一致：同一张 SVG 或 PNG，不能一个用相对路径、一个用 data URL
- 若用内联 SVG，
url("data:image/svg+xml;utf8,...")中的双引号和utf8编码缺一不可，否则 Safari 直接忽略
用 Less Mixin 封装 mask-image 时的硬限制
Less 不支持运行时拼接字符串再当 CSS 值使用，所以这种写法会报错：@url: "mask.svg"; mask-image: url(@url);。正确做法是把路径或 SVG 内容作为 Mixin 参数显式传入：
- 图片路径封装：
.mask-url(@src) { -webkit-mask-image: url(@src); mask-image: url(@src); } - SVG 内联封装：
.mask-svg(@svg-content) { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">@{svg-content}</svg>"); mask-image: ...; } - 别试图用变量控制是否启用某前缀——Less 所有分支都在编译期固化，无法按浏览器 UA 动态开关
mask-image 生效的隐藏前提条件
即使前缀和路径都对，遮罩仍可能“看不见”，大概率栽在这三点：
立即学习“前端免费学习笔记（深入）”；
- 父容器没透出背景：如果遮罩元素外层是
body { background: white }，那遮罩裁剪的只是白底，结果就是一片灰，毫无层次感 -
overflow: hidden和border-radius同时存在：WebKit 渲染管线会放弃 mask 合成，退化为普通裁剪（不是 bug，是渲染限制） - 遮罩图尺寸与元素不匹配：没配
mask-size: cover或mask-position: center，导致遮罩偏移或拉伸失真
pointer-events 或 z-index 层级干扰。 
