body背景图填不满全屏主因是高度未撑开或background-size误用：需设html, body { height: 100%; margin: 0; padding: 0; }，并优先用background-size: cover而非100% 100%。
body 背景图填不满全屏？不是图片问题，大概率是 height 没撑开或 background-size 用错了。
body 元素默认高度不占满视口
HTML 页面中 body 默认高度只包裹内容，不是 100% 视口高。即使写了 background-size: cover，容器本身太小，背景图也无处可“cover”。
必须显式设置：
-
html, body { height: 100%; }—— 缺一不可，html是根容器，body继承它才能生效 -
margin: 0; padding: 0;—— 移除浏览器默认边距，否则顶部/底部留白会暴露背景色或裁切图片 - 如果用了 Flex 或 Grid 布局，也要确认父容器没意外限制高度
background-size: cover 和 100% 100% 的实际区别
两者都让背景图“铺满”，但行为完全不同：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
background-size: cover：保持图片原始宽高比，缩放至**完全覆盖容器**，可能有部分被裁切（适合强调视觉完整性） -
background-size: 100% 100%：强制拉伸到容器宽高，**无视原始比例**，容易变形（仅适用于纯装饰性、无关键内容的图） -
background-size: contain：保持比例并完整显示整张图，四周可能留空（不适合全屏背景）
多数全屏背景场景应优先选 cover，并配合 background-position: center 控制裁切焦点。
路径错误或图片加载失败时背景不显示
背景图“看不见”常被误判为样式问题，实际多是资源加载失败：
- 检查浏览器开发者工具 Network 面板，看图片请求是否
404—— 路径相对于 CSS 文件位置，不是 HTML 文件 - 内联写法如
，路径相对于当前 HTML 文件 - 务必加
background-color作为后备色，比如background-color: #222，避免白屏尴尬 - 图片格式支持没问题，但 WebP 在老版 Safari 上需降级 fallback（需 JS 或 picture 模拟，CSS 本身不支持）
移动端滚动时背景图抖动或错位
iOS Safari 和部分安卓 WebView 在滚动时对 background-attachment: fixed 支持不稳定，但即使没写 fixed，也可能因渲染机制出现轻微跳动：
- 移除
background-attachment（默认是scroll），这是最稳妥做法 - 若坚持视差效果，改用
position: fixed+z-index的伪背景层（div覆盖在 body 上），控制力更强 -
background-origin: padding-box和background-clip: border-box对修复圆角裁切有用，但和抖动无关
真正影响体验的是 height 设置和图片尺寸——一张过小的图在高 DPR 屏幕上会被放大模糊，建议提供至少 1920×1080 基础分辨率，并考虑 @2x 版本通过媒体查询切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
