直接给 body 加 background-image 通常不行，因默认 margin 截断、高度不撑满视口、背景随滚动移动；应设在 html 上并配齐关键 CSS 声明。
直接给
加
通常不行——它会被默认 margin 截断、高度撑不满视口、滚动时背景跟着动，真正可用的方案是设在
上，并配齐关键 CSS 声明。
为什么不能只写
浏览器里
默认有
margin，会露出一圈白边；它的高度由内容决定，不是视口本身；而且 background 渲染区域仅限于内容区，哪怕写了
，父容器（
）没显式高度，这个百分比就无效。
最稳解法：把背景图设在
元素上，天然匹配视口尺寸，不受 margin 干扰
若坚持用
，必须同步清空
并确保
+
在 iOS Safari 上容易卡顿，真要用，加
强制硬件加速
是唯一靠谱的缩放方式
别碰
——它强制拉伸，人像变形、文字模糊、构图崩坏是常态。尤其在 iPad 横屏或 21:9 显示器上，主体常被切成两半。
：等比缩放并裁剪，填满整个容器，视觉重心可控，适合 Banner、登录页
：等比缩放完整显示全图，但大概率留白，适合 Logo 类小图
移动端注意：某些老安卓 WebView 对
支持不稳定，可补一句
路径错、没宽高、没禁平铺，三者任一都会让图“消失”
浏览器不会报错，只会安静地显示默认背景色——这是最常被误判为“代码没生效”的地方。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
路径以 CSS 文件位置为基准，不是 HTML 文件；用相对路径时，
和
差一个层级
绝对路径从域名根目录起算：
，别写成
默认是
，小图会平铺成“瓷砖墙”，必须显式写
元素没宽高？加
看盒子是否存在；
和
都要确认是否塌陷
别忘了兜底和响应式适配
图片加载失败时页面纯白，或者大图在手机上卡顿，都是上线后才暴露的问题。
加
作为降级底色，避免白屏
文字压在图上可读性差？别调
，用
叠一层遮罩更可靠
大图慎用
，iOS 上滚动卡顿明显；改用
+
更稳妥
本地开发用
协议时，Chrome 会直接禁掉
加载本地图，必须起服务（如
）
真正麻烦的从来不是那几行 CSS，而是路径是否对得上、
和
的高度链有没有断、以及 iOS Safari 对
的奇怪脾气——这些地方一漏，背景就静默失效。
bodybackground-imagehtmlbody { background-image: url(...) }body8pxheight: 100%htmlhtmlbodyhtml, body { margin: 0; padding: 0; }html { height: 100%; }body { min-height: 100vh; }background-attachment: fixedtransform: translateZ(0)background-size: cover100% 100%covercontaincoverbackground-size: -webkit-cover;url("../images/bg.jpg")url("images/bg.jpg")url("/assets/bg.jpg")url("C:\xxx\bg.jpg")background-repeatrepeatno-repeatborder: 1px solid redhtmlbodybackground-color: #f0f0f0opacitybackground: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(...)fixedscrollcoverfile://background-imagepython3 -m http.serverhtmlbodyfixed