能，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;
/ ❌ 错误：缺少 /，浏览器当成 position 值处理，size 失效 /
background: url(bg.jpg) no-repeat center center cover;
/ ❌ 错误：size 写在前，语法非法 /
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，即从内边距左上角算起。

• 如果元素有 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);
/ ❌ 错误：color 不接受函数值 /
background-color: linear-gradient(45deg, #ff6b6b, #4ecdc4);

• 可和图片叠加：用逗号分隔多个 background-image 值（从上到下堆叠）
• 叠加时注意层级：第一个值在最上层，最后一个在最底层；background-color 永远垫底
• 渐变无尺寸，默认铺满，但可用 background-size 控制重复单元大小（配合 repeat）

真正容易被忽略的是：当你用 background 简写覆盖了某个元素的全部背景属性时，它会重置所有未显式声明的子属性为初始值——比如漏写 background-attachment，就会从 scroll 变成默认的 scroll（看似没变），但若之前设过 fixed，这一简写就会悄悄把它干掉。