CSS 中 background-image 必须通过样式设置，HTML 标签无 background 属性；需注意路径、尺寸、回退色、响应式适配及性能优化。
background-image 用 CSS 设置，不是 HTML 标签属性
HTML 本身没有 background 或 bg 这类属性可直接给 或 <div> 插背景图——这是常见误解。真正生效的是 CSS 的 <code>background-image，必须写在样式里（内联、<style></style> 或外部 CSS 文件中）。
容易踩的坑：
• 把 background="xxx.jpg" 当成合法 HTML 属性写进标签，浏览器完全忽略
• 忘记设置元素尺寸或内容高度，导致背景图“看不见”（因为元素实际高度为 0）
• 路径写错，尤其是相对路径从 CSS 文件位置算起，不是从 HTML 文件位置
- 推荐用
background简写属性，一次性设图、重复、位置、尺寸：background: url("bg.jpg") no-repeat center/cover; - 如果只设图不设其他，务必加
no-repeat，否则默认平铺，小图会糊满整个区域 - 本地开发时路径建议用相对路径，如
url("./images/bg.jpg")；注意斜杠方向，Windows 下反斜杠\在 CSS 里是转义符，会出错
body 元素背景图常被内容遮挡？检查 z-index 和 background-attachment
很多人发现背景图“不见了”，其实是内容层（比如一个白色 <div>）盖住了它。CSS 中 <code>background-image 永远在最底层，无法靠 z-index 提升——它不属于堆叠上下文里的“层”。
真正影响视觉呈现的是：
• background-attachment: fixed 会让背景图随视口固定，滚动时像“穿透”内容一样，但可能触发性能问题（尤其移动端）
• background-attachment: scroll（默认）则随元素一起滚动，更稳妥
立即学习“前端免费学习笔记（深入）”；
- 若想让背景图始终可见且不被遮挡，优先确保内容容器有透明背景：
background-color: transparent; - 避免对
body设overflow: hidden后又加fixed背景，部分浏览器渲染异常 - 移动端 Safari 对
background-attachment: fixed支持不稳定，慎用
响应式背景图怎么适配不同屏幕？用 background-size + media query 组合
一张图不可能在手机和桌面都完美显示。单纯用 background-size: cover 可能裁掉关键内容，用 contain 又留白太多。得靠条件控制。
常见错误：只写一次 background-size，没考虑断点下图像比例与容器比例差异太大，导致主体被切掉或缩太小。
- 先定基准：
background-size: cover;+background-position: center;是通用起点 - 针对小屏，用媒体查询微调定位，比如手机上把焦点往上移一点：
@media (max-width: 480px) { background-position: center top; } - 如果图本身分辨率低，别强撑
cover，改用background-size: auto 100%;保证高度填满，宽度自适应
加载失败或图太大怎么办？加 background-color 回退色 + 控制体积
网络慢、路径错、CORS 限制都会让 background-image 加载失败，此时页面一片空白或底色裸露——必须预设 fallback。
性能上，单张背景图超过 200KB 就该警惕：首屏阻塞、LCP 延迟、低端设备解码卡顿。
- 永远在
background简写里前置颜色：background: #f0f0f0 url("bg.webp") no-repeat center/cover;，图挂了也能保底 - 优先用
.webp格式，比.jpg小 30%+；用sharp或在线工具压缩，别信“自动优化”插件 - 避免在
body上设超大图（如 4K），改用 CSS 渐变叠加小纹理图，或服务端根据 UA 返回不同尺寸
背景图不是“贴上去就行”的装饰，它是渲染链里真实参与布局计算、资源加载和绘制的一环。路径、尺寸、格式、回退、断点——漏掉任意一环，上线后都可能变成视觉事故。
