background-size: cover 不生效的根本原因在于容器未撑开高度、html/body 缺失 height: 100% 及 viewport meta 标签，而非 Less 编译问题；需同时满足三条件：容器高度撑满、路径正确、构图预留安全区。
为什么直接写 background-size: cover 在 Less 里不生效
不是 Less 编译问题，而是你没解决底层依赖条件：容器没撑开高度、html 和 body 缺失 height: 100%、或忘了加 <meta name="viewport" content="width=device-width, initial-scale=1">。Less 只负责生成 CSS，它不会自动补全这些前提。
常见错误现象：background-size: cover 写对了，但背景图只占页面顶部一小条；移动端横屏时突然留白；iOS Safari 上滚动卡顿——这些问题和 Less 无关，但常被误认为是 mixin 没写好。
-
html, body必须同时设height: 100%+margin: 0+padding: 0 - 用
min-height: 100vh替代height: 100vh更安全，避免内容超一屏时背景被截断 - 移动端必须有 viewport meta，否则浏览器按 980px 宽度渲染，
cover实际作用在“伪宽屏”上，裁剪逻辑全乱
封装 .full-bg() mixin 的核心参数设计
别把所有属性塞进一个 mixin。真正需要动态控制的只有三个：图片路径、缩放方式、定位偏移。其他如 background-repeat、background-attachment 应该由调用方显式决定，避免隐藏副作用。
推荐写法（带默认值，语义清晰）：
立即学习“前端免费学习笔记（深入）”；
.full-bg(@url: none, @size: cover, @pos: center center) {
background-image: url(@url);
background-size: @size;
background-position: @pos;
background-repeat: no-repeat;
}
-
@size默认cover，但允许传contain或100% 100%，不硬编码 -
@pos默认center center，比单个center更明确，规避旧安卓 WebView 解析偏差 - 不封装
background-attachment: fixed—— 它在 iOS Safari 上有性能陷阱，且和min-height: 100vh冲突
移动端人脸/按钮总被裁？靠 background-position 微调，不是换 cover
cover 的行为是确定的：等比缩放 → 填满容器 → 居中裁剪。它不识别“人脸”，也不管“按钮在哪”。裁切位置只由容器宽高比和图片宽高比的差值决定。iPhone 14 Pro 是 19.5:9，你的图若是 16:9，竖屏下必然砍掉上下。
解决方案不是改 cover，而是用 background-position 把视觉重心往上/往侧拉：
- 人物居中站立 → 改用
background-position: center top，把头顶留在可视区 - 按钮在底部 → 用
background-position: center 80%（注意：百分比是相对于容器高度，不是图片） - 媒体查询兜底：
@media (max-width: 768px) { .hero { background-position: center 10%; } } - 避免用
50% 50%替代center center—— 少数安卓内核对百分比解析不稳定
高清屏模糊？用 image-set() 替代多张 @media 查询
CSS 背景图不支持 srcset，但现代浏览器已支持 image-set()。它能按设备像素比（DPR）自动选图，不发多余请求，比一堆 @media (-webkit-min-device-pixel-ratio: 2) 干净得多。
Less 中可这样封装（需配合变量）：
.bg-hd(@url-1x, @url-2x, @url-3x) {
background-image: url(@url-1x);
background-image: image-set(
url(@url-1x) 1x,
url(@url-2x) 2x,
url(@url-3x) 3x
);
}
- 若需兼容老安卓 WebView（如 Android 4.4 内核），仍得备着
padding-top技巧或 fallback 图 -
image-set()不是“锦上添花”，是解决 DPR 适配的根本方案；不加它，2x 屏上cover会强制缩放 1x 图，导致模糊 - 路径变量命名要带后缀，比如
@bg-url-1x: '../img/bg@1x.jpg'，避免混用
最常被忽略的点：背景图自适应不是“写对一个属性就行”，而是三件事必须同时成立——容器高度撑满、图片加载路径正确、构图预留安全区。Less mixin 只是帮你少写几行，它不替你思考图片里的人脸该不该被裁。
