css 中 background-image 必须用于块级元素，路径以 html 文件为基准；需设 background-size（cover/contain）、background-position、background-attachment；body 要加 min-height: 100vh 和 margin: 0，并配 fallback 色。
background-image 用 CSS 设置，不是 HTML 属性
HTML5 本身没有 background 属性，老式写法如 已被废弃，强行用会失效或触发 quirks 模式。必须用 CSS 的 background-image 控制。
- 只对块级元素（如
body、div）生效，span默认不显示背景 - 路径写错是最高频问题：相对路径以 HTML 文件位置为基准，不是 CSS 文件位置
- 如果图片没加载出来，先检查浏览器开发者工具的 Network 标签页里这张图是否返回 404
background-size: cover 和 contain 的区别很关键
默认情况下，背景图会平铺（repeat），大多数网页要的是“一张图撑满整个视口”，这时候必须显式设置 background-size，否则要么留白，要么变形。
-
background-size: cover：等比缩放并裁剪，确保完全覆盖容器 —— 适合全屏 Banner，但可能切掉边缘内容 -
background-size: contain：等比缩放并完整显示整张图 —— 适合 Logo 或图标，但容易上下/左右留白 - 固定宽高（如
100% 100%）会拉伸变形，慎用
别漏掉 background-attachment 和 background-position
光有图和尺寸还不够。滚动时背景要不要跟着动？图在容器里居中还是贴左上？这些都得手动指定，浏览器不会猜。
纯css3 3D图片立方体旋转动画特效
下载
纯css3 3D图片立方体旋转动画特效，需要用到3D旋转的基础知识，如果在个人网站上面放上这样的一个特效，还是很酷炫的，如果在网页上在配商背景音乐，效果也是很不错的！
-
background-attachment: fixed实现“视差”效果，但 iOS Safari 旧版本支持差，部分安卓 WebView 会卡顿 -
background-position: center center比center更明确，避免不同浏览器解析歧义 - 如果用
background: url(...) no-repeat center/cover这种简写，注意顺序不能乱：图片 → 重复 → 位置 → 尺寸 → 附件
body 上设背景图时，记得重置 margin 和 height
直接给 body 加背景图，常遇到图只显示一屏高、滚动后空白——这是因为 body 默认高度由内容撑开，不是全屏。
立即学习“前端免费学习笔记（深入）”；
- 加
html, body { height: 100%; margin: 0; }是基础操作 - 如果内容少于一屏，想让背景图始终铺满可视区，用
min-height: 100vh更可靠 - 用
background-color设个 fallback 色（比如#f0f0f0），图加载失败时不至于一片白或黑
body {
margin: 0;
min-height: 100vh;
background: url("bg.jpg") no-repeat center/cover #eee;
}
背景图的加载时机、CDN 缓存策略、响应式换图（picture 不适用，得用媒体查询配 background-image）这些，才是后续真正要花时间调的地方。 
