Less中mask-image不生效需先检查浏览器前缀与语法：必须同时声明-webkit-mask-image和mask-image，遮罩图推荐SVG并用luminance模式，配合mask-size和mask-position精准控制，避免层级冲突。
Less中直接写mask-image不生效？先确认浏览器前缀和语法结构
现代浏览器对 mask-image 的支持已较稳定（Chrome 53+、Firefox 53+、Safari 15.4+），但 Less 编译本身不会自动补全前缀，也不会校验 CSS 属性合法性。如果你在 Less 文件里写了 mask-image: url(...) 却没效果，大概率是：① 目标浏览器版本太低；② 没配 -webkit-mask-image；③ 遮罩图本身尺寸/透明度不符合预期。
实操建议：
- 始终同时声明
-webkit-mask-image和mask-image，避免 Safari 或旧 Chrome 失效 - 遮罩图推荐用 SVG（内联或外部 URL），确保其中只有黑白灰——白色区域显示内容，黑色区域完全隐藏，灰色为半透
- 别依赖
mask-mode: alpha（目前仅 Firefox 支持），统一用 luminance 模式（默认行为）更稳妥 - 若用 PNG 做遮罩图，务必检查 Alpha 通道是否导出正确；很多设计工具导出时会丢掉透明信息
用 Less Mixin 封装常用遮罩类型：渐变 / 图片 / SVG 内联
重复写 -webkit-mask-image + mask-image 很冗余，适合抽成 Mixin。注意：Less 不支持动态拼接 URL 字符串后直接当值使用（比如 @url: "a.png"; mask-image: url(@url) 会报错），所以得用带参数的 Mixin 显式传入路径或 SVG 内容。
示例（支持三种常见场景）：
立即学习“前端免费学习笔记（深入）”；
.mask-gradient(@direction: to bottom, @stops...) {
-webkit-mask-image: linear-gradient(@direction, @stops);
mask-image: linear-gradient(@direction, @stops);
}
<p>.mask-url(@src) {
-webkit-mask-image: url(@src);
mask-image: url(@src);
}</p><p>.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: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>@{svg-content}</svg>");
}调用方式：
.box {
.mask-gradient(to right, #000 0%, transparent 100%);
.mask-url("/assets/mask-circle.png");
.mask-svg("<circle cx='50' cy='50' r='30' fill='#000'/>");
}为什么mask-size和mask-position必须一起配？
mask-image 默认拉伸铺满元素，但多数遮罩图（尤其是 SVG 或小 PNG）需要精准控制尺寸和定位，否则会出现错位、缩放失真或只遮住一角。Less 中不能省略 mask-size 和 mask-position —— 它们不是可选装饰，而是功能必需项。
实操建议：
- 用
mask-size: contain+mask-position: center最安全，尤其配合 SVG 内联时 - 若需响应式适配，可用
mask-size: 100% 100%，但要确保遮罩图本身有合理宽高比 - 慎用
mask-repeat：重复遮罩在视觉上容易穿帮，且不同浏览器对 repeat + gradient 遮罩的支持不一致 - 所有 mask-* 属性都要加
-webkit-前缀，包括-webkit-mask-size、-webkit-mask-position
Less里怎么处理遮罩层叠加和层级冲突？
CSS 遮罩是作用于单个元素的渲染层，不产生新 stacking context，所以它不会像 z-index 那样影响兄弟元素顺序。但常见误操作是：给父容器设了 mask-image，又给子元素设 position: relative 或 transform，结果子元素内容被意外裁切——这是因为 mask 作用域包含所有后代，且 transform 元素会触发新的 containing block，可能改变遮罩坐标系。
关键点：
- 遮罩只对当前元素及其后代生效，但无法“穿透”到父级或同级元素
- 如果要实现多层遮罩（如背景图 + 文字遮罩），必须拆成多个独立元素，各自设置
mask-image - 避免在已设遮罩的元素上再加
overflow: hidden，二者行为可能冲突，尤其在 Safari 中 - 调试时临时加
background: red到遮罩图 URL 对应的图片上，能快速判断是遮罩没加载，还是遮罩逻辑本身有问题
真正麻烦的是 SVG 内联遮罩里的单位换算和 viewBox 对齐——稍不注意，<circle cx="50"></circle> 就可能偏出视口，这种细节在 Less 里没法自动校验，只能靠预览和 DevTools 的 computed 样式反复核对。
