background-color需统一用background简写或置于background之后声明；路径须以css文件为基准或用绝对路径；background简写顺序必须符合标准；cover完全覆盖容器，contain完整显示图像。
background-color 怎么设才不会被覆盖
background-color 是最基础的背景设置，但它容易被后续的 background 简写属性“一锅端”掉。比如你先写了 background-color: #f0f0f0;，后面又写 background: url(img.png) no-repeat;，这时颜色就没了——因为 background 会重置所有子属性，包括把颜色设为默认的 transparent。
避免覆盖的实操建议：
- 要么统一用
background简写（把颜色、图像、位置等一次写全） - 要么确保
background-color在background之后声明（CSS 层叠规则下，后声明的生效） - 调试时可临时加
!important快速验证是否被覆盖（上线前务必删掉）
background-image 路径写错的典型表现
图像不显示？90% 是路径问题。浏览器控制台报 404 (Not Found) 或 net::ERR_FILE_NOT_FOUND 就是铁证。
常见路径错误与对策：
立即学习“前端免费学习笔记（深入）”；
- 相对路径以 CSS 文件所在位置为基准，不是 HTML 文件——比如
css/style.css里写background-image: url(../images/bg.jpg);，要确认../images/确实存在且有该文件 - 用绝对路径更稳：
background-image: url(/static/images/bg.jpg);（开头的/表示网站根目录） - URL 中空格、中文、特殊符号必须编码，比如
bg 副本.jpg要写成bg%20%E5%89%AF%E6%9C%AC.jpg - 本地双击 HTML 打开时，
file://协议下部分浏览器会禁用background-image加载，务必起本地服务测试
background 简写属性的顺序不能乱
background 一行能写颜色、图、位置、重复、尺寸、附件，但顺序错一点，结果就可能完全不对。标准顺序是：background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip];
关键细节：
- 颜色和图像可以互换位置，但图像必须紧跟在颜色后（或单独出现），否则解析失败
-
/是分隔position和size的唯一合法符号，写成逗号或空格都无效 - 省略某项时，浏览器用默认值：比如没写
repeat，就是repeat；没写background-color，就是transparent - 示例正确写法：
background: #eee url(logo.png) center / 100px auto no-repeat;
background-size: cover 与 contain 的实际效果差异
这两个值常被混淆。它们都缩放图像以适配容器，但逻辑相反：
-
cover：图像等比缩放，**完全覆盖**容器，可能裁剪边缘（适合全屏背景图） -
contain：图像等比缩放，**完整显示在容器内**，可能留白（适合 logo、图标类小图） - 性能上没区别，但
cover在容器宽高比剧烈变化时（如移动端横竖屏切换），容易突然裁掉关键内容，需配合background-position微调 - 想精确控制缩放倍数？直接写像素或百分比：
background-size: 200px 150px;或background-size: 200% 100%;
