如何使用Less的Merge属性合并CSS背景属性？-css教程-PHP中文网

less 无 merge 属性，background 合并依赖 css 层叠规则及 mixin 拼接；需单条 background 声明逗号分隔多层值，多次声明会覆盖；旧版 ie 不支持，应降级用伪元素或绝对定位模拟。

如何使用less的merge属性合并css背景属性？

Less 中没有 `merge` 属性，`background` 合并靠的是 CSS 本身的层叠规则和 Less 的变量/混合写法

很多人搜“Less merge background”，其实是被某些过时文档或命名混淆误导了。Less 本身不提供叫 merge 的语法特性，更不存在针对 background 的专用合并指令。真正能“合并”背景样式的，是 CSS 渲染机制——多个 background 相关声明（如 background-image、background-color）在最终生成的 CSS 中会被浏览器按规范合成一个复合值。

用 `.bg()` 混合封装多层背景，避免手动拼接出错

手写 background: url(...) no-repeat center / cover, linear-gradient(...), #fff; 容易漏逗号、错顺序、搞混层级。Less 混合（mixin）才是安全合并的常用做法：

.bg(@img: none, @grad: none, @color: transparent) {
  background-image: if(@img = none, ~"none", @img);
  background-image: if(@grad = none, ~"none", @grad), background-image;
  background-color: @color;
}

但注意：上面写法有陷阱——CSS 不支持多次 background-image 声明叠加生效（后声明会覆盖前声明）。正确方式是用单条 background 值拼接：

用 ~"..." 拼字符串，确保逗号、斜杠等符号原样输出
把各层背景按从上到下（即渲染顺序）拼进一个 background 值里
空层用 none 占位，避免末尾逗号错误

示例：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.layered-bg(@img, @grad, @color) {
  @full-bg: ~"@{img}, @{grad}, @{color}";
  background: replace(@full-bg, ", none, ", ", ");
  background: replace(@full-bg, "none, ", "");
  background: replace(@full-bg, ", none", "");
}

实际调用：.layered-bg('url(logo.png)', 'linear-gradient(to right, red, blue)', '#fff');