background-size: cover未铺满屏幕的根本原因是容器无明确高度，而非属性失效；需同时设置html和body的margin/padding为0、html高度为100%、背景挂载于html、添加viewport meta标签，并确保构图安全区。
background-size: cover 为什么没铺满屏幕
根本不是 cover 失效，而是它没容器可“盖”。body 默认高度由内容撑开，可能只有几十像素高；cover 就按这几十像素缩放图片，当然只显示一丁点。常见现象包括：背景只占顶部一条、左右留白、滚动时上滑脱节，甚至整张图消失。
-
html和body必须同时清除默认边距：margin: 0; padding: 0; -
html必须设height: 100%;（比100vh更稳，避开 iOS 地址栏收放抖动） - 背景必须挂载在
html元素上，而不是body或某个div—— 否则容器高度不可靠
移动端必须加 viewport meta 标签
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，iOS Safari 和多数安卓浏览器会以桌面宽度（通常 980px）渲染页面，cover 实际作用在“伪宽屏”上，裁剪逻辑全乱，横屏时突然留白或错位。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 漏掉这个标签，再好的
background-size都白配 - 尤其在 iPhone 14 Pro（19.5:9）、部分安卓（20:9）等窄高屏上，错误的 viewport 会让裁切位置完全偏离预期
关键内容总被裁？不是 cover 的问题，是构图问题
cover 的行为是确定的：等比缩放 → 填满容器 → 居中裁剪。它不识别“人脸”，也不管“按钮在哪”。裁切位置只由容器宽高比和图片宽高比的差值决定。
- 确保人物/按钮/文字落在图片中心 60% 区域内（这是最稳妥的“安全区”）
- 显式写
background-position: center center;，不要依赖默认值——少数安卓 WebView 对50% 50%解析有偏差 - 避免用超宽图（如 3840×1080）做全屏背景，竖屏手机会疯狂裁剪顶部和底部
要不要用 background-attachment: fixed？
别轻易用。它在 iOS Safari（尤其旧版本）上有性能陷阱：滑动卡顿、滚动错位，且与 min-height: 100vh 冲突。很多人误以为是 cover 没生效，其实是固定背景自身失效。
- 如需固定效果，建议用
position: fixed+z-index叠加一层<img>替代 -
background-attachment: fixed不该封装进 mixin，它和响应式背景不是同一层问题
html, body { margin: 0; padding: 0; }<br>html { height: 100%; }<br>html { background: url("bg.jpg") no-repeat center center / cover; }
真正容易被忽略的，从来不是写法，而是把背景挂到哪、容器有没有高度、viewport 是否正确——这些前提错了，再复杂的 mixin 也救不回来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
