less v4.x 已彻底移除 background+ 和 background+_ 语法,多重背景须用逗号分隔的 background-image 值列表,如 url(a.png), linear-gradient(~"to bottom", #fff, #eee);配套属性需按图层顺序一一对应,单位不可省略,background-blend-mode 必须单独声明。

Less 的 background+ 和 background+_ 在 v4.x 中已失效
直接写 background+: url(a.png); background+_: no-repeat; 会报 ParseError: Unexpected token '+'——不是配置没开,是语法被彻底移除了。Less v3.5.0 起就标记为废弃,v4.x(当前主流版本)已完全删除 + 和 + _ 合并机制。你看到的旧博客或遗留代码里那种“叠加写法”,现在连编译都过不去。
多重背景必须用逗号分隔的 background-image 值列表
CSS 原生支持多层背景,靠的是 background-image 接受逗号分隔的多个图像值,比如 url(logo.png), linear-gradient(to bottom, #fff, #eee)。Less 要生成这种结构,就得老老实实拼 list,而不是依赖已删除的合并语法。
- 正确做法:定义一个 space-separated list,再用
join()拼成逗号分隔字符串,例如:@bg: url("a.png") no-repeat, linear-gradient(~"to bottom", #fff, #eee); background-image: @bg; - 注意:
join()默认用逗号连接,但如果你手动构造 list,Less 会原样输出空格分隔内容;而background-image需要的是逗号分隔,所以必须显式join(@list, ", ") - 方向参数如
to bottom必须用~"to bottom"转义,否则会被当变量名解析失败
用 Mixin 封装多背景逻辑时,单位与顺序不能错
写一个 .multi-bg() Mixin 看似简单,但两个细节一错,整层就消失:
-
background-position、background-size等配套属性也得按图层顺序一一对应,用逗号分隔。比如两层背景,background-position: center, top left;—— 第一个值对应第一层,第二个对应第二层,错一位就偏移 - 所有尺寸值(如
@size: 100px)声明时必须带单位,否则参与join()或计算时会变成无单位数字,输出background-size: 100 200这种非法值,浏览器静默丢弃 - 渐变层不要加
background-size: 100px 200px,它不接受像素高宽;改用background-size: 100% 100%或干脆不设
background-blend-mode 必须单独声明,不能塞进 background 复合属性
background-blend-mode 是独立 CSS 属性,不属于 background 复合属性的一部分。即使你在 Less 里写 background: url(a.png), url(b.png); background-blend-mode: multiply;,编译后它也不会自动合并进 background 声明里——这是对的,也必须这样写。
- 别试图用
background: url(a.png), url(b.png) blend-mode(multiply),这种写法不存在 - 多背景 + 混合模式的最小可靠单元是三行:
background-image、background-blend-mode、配套的background-position等,缺一不可 - 移动端慎用
background-attachment: fixed,它和background-blend-mode叠加时容易触发渲染异常,优先用scroll+ GPU 加速容器模拟视差
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











