background-image需配合background-size、background-repeat、background-position使用，常见失效原因包括路径基准错误（以CSS文件为准）、元素无宽高、父元素overflow:hidden裁剪、body默认margin未清除；行内样式注意引号嵌套；它属装饰性内容，不参与语义、SEO和可访问性。
background-image 用法和常见失效原因
直接在元素上写 background-image 是最常用方式，但经常“图没显示”，不是路径错，就是默认被盖住了。它本身不占布局空间，也不自动拉伸适配，得靠配套属性一起调。
-
background-image只负责载入图片，必须配合background-size、background-repeat和background-position才能按预期呈现 - 路径错误是最常见问题：用相对路径时，基准是 CSS 文件位置，不是 HTML 文件；用
./或../要严格对照目录结构 - 元素没有宽高（比如空
），背景图就不可见——CSS 背景不会撑开容器 - 如果父元素有
overflow: hidden，而背景图设了大尺寸或偏移，可能被意外裁剪
给 body 或整个页面加背景图的正确写法
很多人想让背景图铺满整个视口，但只写 background-image 不够。关键要控制尺寸、重复和定位，还要防止滚动时背景“跟着动”。
body {
margin: 0;
background-image: url("images/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
-
background-size: cover确保图完全覆盖视口，可能裁边；用contain则保证全图可见但可能留白 -
background-attachment: fixed让背景图随视口固定，滚动时像“壁纸”一样不动；不加这句，默认是scroll，图会随内容滚动 - 务必清空
body默认margin，否则顶部/左右可能露白边
用 inline-style 写背景图要注意什么
HTML 中用 style 属性写背景图，语法和 CSS 一致，但引号嵌套容易出错，且无法响应式控制。
- URL 里的单引号/双引号必须和外层 style 的引号不冲突，推荐外层双引号、内层单引号
- 所有 background 相关属性都得写在同一个
style里，不能拆成多个style属性 - 行内样式优先级高，后续 CSS 很难覆盖，调试时容易误判来源
- 不适合做 Retina 适配或媒体查询，比如无法在
@media (min-width: 768px)里换图
background-image 和 ![HTML5怎样插入背景图_HTML5插入背景图方式【CSS】]()
标签的本质区别
别把 background-image 当成另一种
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器不会读取
background-image，所以含关键信息的图（如图标+文字组合）必须用alt - 打印样式表中，
background-image默认不打印，除非显式设置print-color-adjust: exact - 加载行为不同：
background-image是异步加载，不影响 DOM 解析 - 想实现淡入、缩放等动画，
background-image无法直接用transform动，得靠background-position或 wrapper 元素模拟
![HTML5怎样插入背景图_HTML5插入背景图方式【CSS】]()
