background-size: cover未铺满全屏的主因是容器高度不足，须设html和body为height: 100%，且cover等比缩放裁剪，100% 100%则强制拉伸变形；模糊源于图片分辨率低或Retina屏插值放大。
background-size: cover 为什么图片还是没铺满全屏
常见错误是只写了 background-size: cover，但忘了设 background-attachment 和容器尺寸。浏览器默认 body 高度不占满视口，且 background 默认只在内容区渲染——哪怕图片尺寸拉伸了，容器本身没撑开，视觉上仍是“没铺满”。
- 必须给根容器（如
html和body）设height: 100%，否则cover没作用范围 - 加
background-attachment: fixed可避免滚动时背景“上滑脱节”，但要注意 iOS Safari 对 fixed 背景的兼容性较差 - 如果用在
div上而非body，要确保该div高度至少为100vh，不能依赖内容撑高
cover 和 100% 100% 的区别在哪
background-size: cover 是等比缩放并裁剪，保证元素区域被完全覆盖；background-size: 100% 100% 是强制拉伸，会变形。实际项目中，前者用于头图、Banner，后者几乎不用——除非你明确接受失真。
-
cover下，图片宽高比不变，可能左右或上下被裁掉一部分 -
100% 100%会把原图像素强行映射到整个区域，宽高比被破坏，人像/文字容易发虚 - 部分老安卓 WebView 对
cover渲染有延迟，可加transform: translateZ(0)触发硬件加速
移动端 viewport 和 cover 的冲突怎么解
iOS Safari 在横屏切换或键盘弹出时，vh 单位会动态变化，导致基于 100vh 的全屏背景突然错位或留白。这不是 cover 的问题，而是高度基准不稳定。
- 避免直接用
height: 100vh做容器，改用min-height: 100vh+height: 100%组合更稳妥 - 在 iOS 上，可监听
resize事件，用 JS 动态重设容器高度（仅当检测到document.documentElement.clientHeight变化时） - 如果页面有固定头部/底部，用
calc(100vh - 60px)比纯100vh更安全，但注意 CSS calc 不支持百分比嵌套
background-image 加 cover 后模糊怎么办
模糊通常不是 CSS 导致的，而是图片分辨率不足 + 浏览器缩放算法所致。特别是 Retina 屏下，cover 把一张 1920×1080 图拉到 2560×1440 区域，像素点被插值放大，细节就糊了。
立即学习“前端免费学习笔记（深入）”；
- 优先提供 2x 分辨率图：比如目标显示区域是
1920px宽，就准备一张至少3840px宽的图 - 用
image-rendering: -webkit-optimize-contrast或image-rendering: crisp-edges强制浏览器用最近邻算法（适合像素风），但对照片类图反而更糟 - 不要用
transform: scale()模拟全屏——它只是图形层缩放，会放大所有锯齿和噪点
cover 的逻辑很干净，但真正卡住人的永远是它的上下文：容器高度、设备特性、图片源质量。调的时候别只盯 CSS 属性，先确认 document.body.offsetHeight 是不是真的等于视口高度。
