能，background-color 与 background-image 可共存：前者作为 PNG 透明区域填充色或加载失败兜底色；rgba/hsla 可实现半透明叠加；简写时 position / size 须用斜杠分隔且顺序固定；center 等效于 center center；cover/contain 不加引号；background-origin 影响居中基准，border-box 更常用；渐变必须用 background-image；多图叠加用逗号分隔，background-color 永远垫底；background 简写会重置未声明的子属性。
background-color 和 background-image 能否共存？
能，而且经常一起用——background-color 会作为 background-image 的「兜底色」或「透明区域填充色」。比如一张带 alpha 通道的 PNG 图片，周围留白部分就会透出你设的背景色。
- 若图片加载失败，
background-color会正常显示，提升容错体验 - 使用
rgba()或hsla()可让背景色半透明，与渐变/图片形成叠加效果 - 注意：如果图片本身不透明且完全覆盖容器，
background-color就“看不见”，但依然参与渲染流程（影响层叠、性能等）
background 简写时 position 和 size 怎么写才不翻车？
简写中 background-position 和 background-size 必须用斜杠 / 分隔，且顺序固定：position / size。写反或漏斜杠会导致整个声明被浏览器忽略。
/* ✅ 正确：居中 + cover */ background: url(bg.jpg) no-repeat center center / cover; <p>/<em> ❌ 错误：缺少 /，浏览器当成 position 值处理，size 失效 </em>/ background: url(bg.jpg) no-repeat center center cover;</p><p>/<em> ❌ 错误：size 写在前，语法非法 </em>/ background: url(bg.jpg) no-repeat cover center center;
-
center center和center效果相同（第二个值默认为center） -
cover和contain是关键字，不能加引号；像素值如100px 200px则必须成对出现 - 旧版 Safari 对
/后的background-size支持较弱，关键项目建议单独写background-size
no-repeat + center 为什么有时图片还是偏了？
因为 background-position: center 是相对于「背景定位区」（由 background-origin 决定）居中，不是绝对居中容器。默认 background-origin 是 padding-box，即从内边距左上角算起。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 如果元素有
padding，又没设background-origin，图片实际是相对于 padding 区居中，视觉上就可能“偏右下” - 解决方法：显式加
background-origin: border-box或content-box，更常用的是border-box（以边框外沿为参考） - 当
background-attachment: fixed时，background-origin无效，此时只能靠background-position手动调像素值
渐变背景要不要写 background-image？
要。CSS 渐变（linear-gradient、radial-gradient）本质是图像类型，必须通过 background-image 引入，不能直接赋给 background-color。
立即学习“前端免费学习笔记（深入）”；
/* ✅ 正确：渐变属于 image */ background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4); <p>/<em> ❌ 错误：color 不接受函数值 </em>/ background-color: linear-gradient(45deg, #ff6b6b, #4ecdc4);
- 可和图片叠加：用逗号分隔多个
background-image值（从上到下堆叠） - 叠加时注意层级：第一个值在最上层，最后一个在最底层；
background-color永远垫底 - 渐变无尺寸，默认铺满，但可用
background-size控制重复单元大小（配合repeat）
真正容易被忽略的是：当你用 background 简写覆盖了某个元素的全部背景属性时，它会重置所有未显式声明的子属性为初始值——比如漏写 background-attachment，就会从 scroll 变成默认的 scroll（看似没变），但若之前设过 fixed，这一简写就会悄悄把它干掉。
