最简单但不推荐的方式是直接在标签中用bgcolor属性（已废弃），推荐用CSS的background-color或background-image配合no-repeat、cover等属性设置纯色或背景图，并注意路径、兼容性和fallback策略。
怎么用 background-color 设置纯色背景
直接写在 标签里最简单，但不推荐——样式和结构混在一起，改个颜色都要动 HTML。更稳妥的做法是用内联 style 或外部 CSS。
常见错误：写成 bgcolor="#fff"（这是旧版 HTML 属性，现代浏览器虽兼容但已废弃，W3C 不再支持）。
正确写法示例：
body {
background-color: #f0f0f0;
}
注意：background-color 只影响背景色，不影响文字或子元素的背景；如果子元素有自己设的 background-color，会盖住父级的。
立即学习“前端免费学习笔记（深入）”；
怎么用 background-image 加背景图
图片路径写错是最常卡住的地方。相对路径以 HTML 文件所在位置为基准，不是 CSS 文件位置——这点很多人搞反。
必须同时配 background-repeat 和 background-size，否则默认平铺且不缩放，小图拉伸变形、大图只显示左上角。
实用组合建议：
-
background-image: url("bg.jpg");—— 路径用双引号，单引号也行，但别漏 -
background-repeat: no-repeat;—— 关掉平铺 -
background-size: cover;—— 全屏拉伸并保持比例（可能裁边） -
background-position: center;—— 居中对齐，避免偏移
如果图没显示，先检查控制台有没有 404 错误，再确认路径是否真的指向了图片文件。
background 简写属性怎么写才不踩坑
简写方便，但顺序不能乱：background: <color><image><repeat><attachment><position>;</position></attachment></repeat></image></color>。漏掉某个值，浏览器会用默认值覆盖，容易意外清掉你之前设的图或颜色。
比如写了 background: #fff url("a.png");，实际等价于：
background-color: #fff;
background-image: url("a.png");
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
问题来了：它自动带上了 repeat，图又开始平铺。所以更安全的简写是：
background: #fff url("a.png") no-repeat center/cover;
其中 center/cover 是 background-position 和 background-size 的合并写法，CSS3 支持，但 IE11 及以下不认 / 写法，得拆开写。
背景图加载失败时怎么 fallback 到颜色
CSS 本身不提供“图片加载失败就换颜色”的原生机制，background 简写里写的颜色只是层叠底色，不是 fallback。
真正可靠的 fallback 方式只有两种：
- 用两层背景：先写一个纯色，再叠加图片（图片在上，失败就透出底下颜色）——但得用
background多层语法，仅支持现代浏览器 - 更通用的办法：JS 监听图片加载，失败后动态加 class 切换背景色，例如监听
<img alt="html怎么做网页背景_html设置网页背景颜色与图片的代码【技巧】" >的onerror不适用于 CSS 背景图，所以得靠 JS 预加载校验
多数项目其实没必要这么重，直接确保路径正确 + 提供合理 background-color 作为视觉缓冲就够了。真要强容错，优先检查部署后静态资源路径是否被构建工具改名或挪位置。
背景图的尺寸、格式（WebP 比 JPG 小但不兼容老浏览器）、是否启用 CDN 缓存，这些都会影响首屏加载表现，但它们不属于 CSS 背景设置本身的问题——别把性能锅全扣在 background-image 上。
