最简单设纯色背景用background-color，支持颜色名、十六进制、RGB/RGBA；设背景图用background-image配合size/position/repeat控制；推荐简写background并加fallback色值，响应式用媒体查询切换图片。
background-color 直接设纯色背景
最简单的方式就是用 background-color 给 或容器加单色背景。支持颜色名（如 red）、十六进制（#ff6b35）、RGB（rgb(255, 107, 53)）和 RGBA（带透明度，如 rgba(0, 0, 0, 0.7)）。
注意：RGBA 的 alpha 值是 0–1 的小数，不是百分比；如果想让文字在深色背景上可读，别忘了同步调 color。
- 推荐优先用十六进制或 RGBA，语义明确、兼容性好
- 避免用
background-color: transparent代替“不设背景”，它仍会触发层叠上下文，可能影响 z-index 行为 - 如果页面有滚动，纯色背景默认会随内容平铺——这没问题；但若用了背景图，就需额外控制重复行为
background-image 加本地或网络图片
用 background-image: url("...") 引入图片。路径可以是相对路径（如 url("./img/bg.jpg")）、绝对路径（url("/assets/bg.png")）或网络地址（url("https://example.com/bg.webp")）。
单独写 background-image 很少够用，通常要配合 background-size、background-position 和 background-repeat 才能控制显示效果。
立即学习“前端免费学习笔记（深入）”；
-
background-size: cover拉伸填满容器，可能裁剪边缘；contain完整显示全图，留白常见 -
background-position: center center是最常用居中写法，也支持top left、50% 20px等组合 -
background-repeat: no-repeat必须显式声明，否则默认平铺，大图变马赛克 - WebP 格式体积小、质量高，现代浏览器基本都支持，优先选它而非 JPG/PNG
用 background 简写一次性设多个属性
background 是复合属性，能合并设置颜色、图片、位置、尺寸、重复等。顺序虽宽松，但推荐按规范写法：background:
实际常用精简版就够了，比如：background: #1a1a1a url("./bg.jpg") center/cover no-repeat;。这里 center/cover 是 background-position / background-size 的简写。
- 如果写了
background简写，会**完全覆盖**之前所有独立的background-*设置，包括background-color - 不要漏掉
no-repeat，尤其当图片小又没设尺寸时，一不留神就铺满屏幕 - 简写里不写颜色，但图片加载失败时页面会透出默认白色——建议在简写开头补一个 fallback 颜色，如
background: #2c3e50 url(...) ...
响应式背景图适配不同屏幕
单张背景图在手机上常被拉伸变形或裁剪过度。用媒体查询切换不同尺寸图，或用 picture + background-image 的 CSS 方案更可控。
CSS 中较实用的是 @media 配合 background-image 替换：
body {
background-image: url("./bg-desktop.jpg");
background-size: cover;
}
@media (max-width: 768px) {
body {
background-image: url("./bg-mobile.jpg");
}
}
更进一步，可用 image-set()（Chrome/Firefox 支持）自动选分辨率适配图，但兼容性有限，目前稳妥做法仍是媒体查询分图。
- 移动设备慎用大图（>1MB），优先压缩+WebP+懒加载（CSS 背景图本身不支持 loading 属性，得靠 JS 或改用
- 如果背景图上有文字，记得加
background-attachment: fixed时测试滚动性能——iOS Safari 容易卡顿 - 暗色模式下背景图可能对比度过低，可结合
@media (prefers-color-scheme: dark)切换深色 fallback 色值
