background-size: cover 失效主因是容器无明确尺寸，需设 html, body { height: 100%; margin: 0; }，区块用 min-height: 100vh，配 center 定位与 no-repeat，慎用 fixed 及注意 ios safari 偏移。
Less中background-size: cover的常见失效场景
直接写 background-size: cover 在Less里本身没问题，但实际项目中常遇到：父容器没设高、html/body 高度未归一、背景图在移动端被拉伸、或配合background-attachment: fixed时定位偏移。这些都不是cover本身的问题，而是它依赖「容器有明确尺寸」这一前提。
- 确保全屏生效前，必须显式设置
html, body { height: 100%; margin: 0; } - 若用于某个
.hero区块，该区块需有height: 100vh或min-height: 100vh（后者更安全，避免内容溢出时截断） -
background-attachment: fixed在iOS Safari上可能触发渲染异常，慎用
封装一个真正可用的full-cover混合宏
这个宏要解决三件事：尺寸适配、居中裁剪、响应式回退。不只套一层background-size，而是组合关键声明：
.full-cover(@img-url, @position: center center, @repeat: no-repeat) {
background-image: url(@img-url);
background-position: @position;
background-repeat: @repeat;
background-size: cover;
background-color: #000; // 防止图片加载前白屏
// 关键：强制容器撑开，避免塌陷
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
}
- 必须搭配
position: relative在调用元素上，否则:before无法占满 -
@position默认center center，传top left可手动控制裁剪起点 - 不要加
background-attachment: fixed进这个宏——它和cover在滚动时行为冲突，应单独处理
移动端适配：为什么cover在iPhone上总偏右？
这不是Bug，是Safari对background-size: cover的实现差异：当容器宽度因viewport缩放产生亚像素时，Safari会优先保证高度填满，导致水平方向微偏。解决方法不是换方案，而是加一层校准：
- 在
@media (max-width: 768px)里，把background-size临时切为100% auto，再用background-position-x: center强制水平居中 - 或更稳妥：用
image-set()提供2x图源，减少缩放误差（需Less支持CSS函数，建议升级到Less 4+）
为什么不用CSS自定义属性替代Less宏？
可以，但有代价：--bg-url无法在伪元素中动态拼接URL，background-image: url(var(--bg-url))在部分浏览器（如旧版Edge）不生效；而Less宏在编译期就生成确定CSS，无运行时风险。若项目已用CSS-in-JS或PostCSS，那确实该交给postcss-background-image这类插件处理。
真正容易被忽略的是：全屏背景图的语义化。纯装饰图用background-image没问题，但如果图中含关键信息（比如品牌Slogan），必须用<img> + object-fit: cover并配alt——这和Less封装无关，但上线前常被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
