background-color和background-image设置背景时需注意属性作用区域、路径规范、简写顺序及覆盖规则：color仅作用于内容区与内边距，图片路径须用相对路径，简写background会重置未声明的子属性。
直接用 background-color 或 background-image 就能设背景，但写错位置、漏单位、混淆简写规则，页面就可能不生效或覆盖出问题。
background-color 设置纯色背景时的常见写法和坑
最常用的是十六进制（如 #333）、RGB（如 rgb(51, 51, 51)）或颜色名（如 lightblue）。注意：
-
background-color只作用于元素的 内容区 + 内边距区，不包括边框；如果想让背景延伸到边框下，得加background-clip: border-box - 写成
color: #fff是设文字颜色，不是背景——新手常抄错属性名 - 透明度要写
rgba(0, 0, 0, 0.5)，不能写rgb(0,0,0,0.5)，后者浏览器会直接忽略整条声明 - 如果父容器没设高度，而子元素是浮动或绝对定位，
background-color可能“看不见”——本质是父容器高度塌陷
background-image 加载图片背景的关键控制点
用 url() 引入图片，但路径、尺寸、重复行为全靠配套属性控制：
- 路径推荐用相对路径，比如
background-image: url("./img/bg.jpg")；若写成url("bg.jpg")，实际找的是 css 文件同级目录，不是 HTML 所在目录 - 必须配
background-size：想铺满容器用cover，想完整显示用contain，拉伸填充用100% 100% - 默认会平铺（
background-repeat: repeat），不想重复得显式写no-repeat - 图片加载失败时背景会变空白，可叠加纯色兜底：
background-color: #f0f0f0; background-image: url(...)，颜色会在图片未加载完时先显示
用 background 简写时最容易踩的顺序和覆盖陷阱
background 是复合属性，顺序错一个，后面值就可能被浏览器忽略或误解析：
立即学习“前端免费学习笔记（深入）”；
- 标准顺序是：
background: [color] [image] [repeat] [attachment] [position] / [size] [origin] [clip]; - 最简可用写法：
background: #fff url(bg.png) no-repeat center / cover;—— 注意/前是位置，后是尺寸 - 一旦用了简写，所有未写出的子属性都会重置为默认值。比如只写
background: url(x.jpg)，那background-color就变成transparent，可能导致文字看不清 - 不要在同一个选择器里既写
background简写，又单独写background-color，后者大概率被前者覆盖掉
真正难的不是写对一行样式，而是搞清它最终作用在哪个盒模型区域、是否被父级或后续规则覆盖、图片路径是否真实可达——调试时优先检查 computed 样式里的 background-image 是否解析为有效 URL，而不是只盯着代码看。