当使用 background-size: cover 时，背景图仅显示部分内容（如底部三分之二），根本原因是 和 默认高度未定义，导致背景渲染区域远小于视口，需显式设置 height: 100%。
当使用 `background-size: cover` 时，背景图仅显示部分内容（如底部三分之二），根本原因是 `` 和 `
` 默认高度未定义，导致背景渲染区域远小于视口，需显式设置 `height: 100%`。在 Web 开发中，background-image 配合 cover 值常用于实现全屏响应式背景图，但若未正确设置容器高度，极易出现“只显示图像局部”（如仅底部区域）的异常现象。其本质并非图片本身或路径问题，而是 CSS 渲染上下文的高度缺失。
默认情况下， 和 元素的高度由内容撑开，而非自动继承视口高度。当 内容为空（如示例中的纯背景页）时，其计算高度为 0，此时 background-size: cover 只能在高度为 0 的区域内缩放——浏览器会退而采用最小可行尺寸（通常基于字体行高或初始块格式化上下文），造成图像被裁剪、错位甚至不可见。
✅ 正确做法是显式赋予 html 和 body 100% 视口高度：
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url('https://picsum.photos/1920/1080');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}同时建议补充 background-repeat: no-repeat（虽 cover 下默认不重复，但显式声明更健壮），并确保 margin 和 padding 归零以避免意外偏移。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项：
- 仅设置
body { height: 100% }不足：因body高度依赖父元素（即html），若html无高度，则body的100%仍为0； - 若页面有滚动内容，且希望背景随内容延伸，可改用
min-height: 100vh并配合background-attachment: fixed（慎用，可能影响性能）； - 在 Flex/Grid 布局中，父容器也需具备明确高度，否则子元素的
100%高度同样失效。
综上，height: 100% 是启用 cover/contain 等背景缩放行为的前提条件——它不是“样式优化”，而是建立正确渲染上下文的必要基础。
