background-size: cover 更安全，因其等比缩放并裁剪，保持构图；而100% 100%暴力拉伸破坏宽高比，导致变形、撕裂。
用 background-image 配合 background-size: cover 是最可靠、语义正确且兼容性好的方案；直接用 <img> 标签强行拉满 100vw/100vh 容易变形、留白、错位，还影响可访问性。
为什么 background-size: cover 比 100% 100% 更安全
强制设 background-size: 100% 100% 会让图片彻底失去原始宽高比——横屏手机上人脸被压扁，超宽显示器里文字被拉长，滚动时还可能出现渲染撕裂。而 cover 是等比缩放后裁剪，视觉重心可控，构图不崩。
-
cover：宽或高至少一个填满容器，多余部分裁掉；适合强调氛围的背景图 -
contain：整张图完整可见，必然留白；只适合 Logo、示意图等必须全貌的场景 -
100% 100%：不是“填满”，是“暴力拉伸”，基本等于放弃构图控制
body 上 background-image 不满屏？先查这三处
90% 的“不满屏”问题都卡在这几个基础设置上，不是图片本身的问题。
- 没清
body默认边距：body { margin: 0; }必须写，否则上下左右各留 8px 白边 -
html和body高度链断裂：只写body { height: 100vh; }够用，但更稳妥是html { height: 100%; } body { min-height: 100vh; } - 忘了关平铺：
background-repeat: no-repeat;不加的话，小图会密密麻麻铺满整个屏幕
图片路径 404？别猜，看 Network 面板
浏览器加载背景图时，路径是相对于 CSS 文件位置计算的，和 HTML 文件无关。本地能跑不等于上线能用。
- CSS 在
/static/css/main.css，图在/static/images/bg.jpg→ 必须写url("../images/bg.jpg") - 想用根路径统一管理 → 写
url("/images/bg.jpg")（开头带斜杠） - Linux 服务器大小写敏感：
bg.JPG≠bg.jpg，上线前务必检查文件名 - 打开 DevTools → Network → 刷页面，直接看请求是否返回 404，别靠“没显示”瞎试
移动端 fixed 背景失效？降级处理比硬扛更实际
background-attachment: fixed 在 iOS Safari 和部分安卓 WebView 中表现不稳定，滚动时卡顿、闪烁甚至直接回退成 scroll 行为。
- 优先用
scroll，加一层linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3))叠在背景上提升文字可读性 - 真要视差效果，改用 JS 滚动监听 + transform，或用伪元素模拟 fixed 层级
- 加
transform: translateZ(0)可能触发硬件加速，但不能根治，仅作尝试
最容易被忽略的是：图片分辨率。一张 1280×720 的图在 4K 屏上模糊得没法看，但换一张 3840×2160 的图又拖慢首屏。实际项目里，该用 @media 切图，该加 background-color 占位，该压缩 WebP，一个都不能省。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
