直接给 body 加 background-image 通常不行，因默认 margin 截断、高度不撑满视口、背景随滚动移动；应设在 html 上并配齐关键 CSS 声明。
直接给 body 加 background-image 通常不行——它会被默认 margin 截断、高度撑不满视口、滚动时背景跟着动，真正可用的方案是设在 html 上，并配齐关键 CSS 声明。
为什么不能只写 body { background-image: url(...) }
浏览器里 body 默认有 8px margin，会露出一圈白边；它的高度由内容决定，不是视口本身；而且 background 渲染区域仅限于内容区，哪怕写了 height: 100%，父容器（html）没显式高度，这个百分比就无效。
- 最稳解法：把背景图设在
html元素上，天然匹配视口尺寸，不受 margin 干扰 - 若坚持用
body，必须同步清空html, body { margin: 0; padding: 0; }并确保html { height: 100%; }+body { min-height: 100vh; } -
background-attachment: fixed在 iOS Safari 上容易卡顿，真要用，加transform: translateZ(0)强制硬件加速
background-size: cover 是唯一靠谱的缩放方式
别碰 100% 100%——它强制拉伸，人像变形、文字模糊、构图崩坏是常态。尤其在 iPad 横屏或 21:9 显示器上，主体常被切成两半。
-
cover：等比缩放并裁剪，填满整个容器，视觉重心可控，适合 Banner、登录页 -
contain：等比缩放完整显示全图，但大概率留白，适合 Logo 类小图 - 移动端注意：某些老安卓 WebView 对
cover支持不稳定，可补一句background-size: -webkit-cover;
路径错、没宽高、没禁平铺，三者任一都会让图“消失”
浏览器不会报错，只会安静地显示默认背景色——这是最常被误判为“代码没生效”的地方。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 路径以 CSS 文件位置为基准，不是 HTML 文件；用相对路径时，
url("../images/bg.jpg")和url("images/bg.jpg")差一个层级 - 绝对路径从域名根目录起算：
url("/assets/bg.jpg")，别写成url("C:\xxx\bg.jpg") -
background-repeat默认是repeat，小图会平铺成“瓷砖墙”，必须显式写no-repeat - 元素没宽高？加
border: 1px solid red看盒子是否存在；html和body都要确认是否塌陷
别忘了兜底和响应式适配
图片加载失败时页面纯白，或者大图在手机上卡顿，都是上线后才暴露的问题。
- 加
background-color: #f0f0f0作为降级底色，避免白屏 - 文字压在图上可读性差？别调
opacity，用background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(...)叠一层遮罩更可靠 - 大图慎用
fixed，iOS 上滚动卡顿明显；改用scroll+cover更稳妥 - 本地开发用
file://协议时，Chrome 会直接禁掉background-image加载本地图，必须起服务（如python3 -m http.server）
真正麻烦的从来不是那几行 CSS，而是路径是否对得上、html 和 body 的高度链有没有断、以及 iOS Safari 对 fixed 的奇怪脾气——这些地方一漏，背景就静默失效。
