background-image 本身不控制布局，必须配合 background-size、background-position 和 background-repeat 才能实现精确控制；其中 background-size 是布局关键开关，常见值包括 cover、contain、100% 100% 和 auto 100%。
background-image 需要配合 background-size 才能真正控制布局
单独设 background-image 只是加载图片，不指定尺寸和定位，浏览器默认按原始大小平铺（background-repeat: repeat），根本谈不上“布局”。关键在 background-size、background-position 和 background-repeat 三者的组合。
-
background-size: cover：等比缩放填满容器，可能裁剪边缘 -
background-size: contain：等比缩放完整显示整张图，可能留白 -
background-size: 100% 100%：强行拉伸铺满，会变形 -
background-size: auto 100%：高度固定，宽度按比例自适应（常用于全高侧边栏背景）
用 background-attachment: fixed 实现视差滚动效果时要注意兼容性
这个值能让背景图相对于视口固定，滚动时内容从图上滑过。但它在移动端 Safari 和部分安卓 WebView 中表现不稳定，甚至被禁用（尤其在 overflow: scroll 容器内）。
- 替代方案：用
position: sticky+z-index分层模拟 - 必须加
background-color作为降级底色，防止图片加载失败或禁用时空白 - 慎用在长页面顶部 banner —— iOS 上可能触发渲染卡顿
响应式背景图不能只靠 media query 切换图片地址
仅用 @media 改 background-image: url(...) 会导致小屏设备仍下载大图（浏览器已提前解析 CSS）。真正响应式得靠 picture 思路的 CSS 替代方案：
section {
background-image: url('bg-small.jpg');
}
@media (min-width: 768px) {
section {
background-image: url('bg-medium.jpg');
}
}
@media (min-width: 1200px) {
section {
background-image: url('bg-large.jpg');
}
}
- 必须确保每个断点下的图片都经过压缩，且宽高比一致，否则
background-size行为会突变 - 如果需 art direction（如横竖构图切换），只能用
- Webpack/Vite 用户可用
image-set()（但目前仅 Safari 和 Chrome 111+ 支持）
background-blend-mode 在深色模式下容易意外变黑
当叠加多个背景图或用 background-color 混合时，background-blend-mode: multiply 或 overlay 在浅色背景上正常，但系统切深色模式后，若未同步改 background-color，混合结果可能发灰甚至死黑。
- 检查是否用了硬编码颜色值（如
#fff），应改用CSS color-scheme或prefers-color-scheme媒体查询重置 -
background-blend-mode不支持rgba()的 alpha 通道参与混合，半透图叠加效果不可控 - 性能敏感区域（如滚动容器）避免使用，某些低端 Android 设备会掉帧
background-size 是布局开关，而不是可选项。另外，移动端对 fixed 和 blend-mode 的处理远比桌面端粗糙，真要保体验，得提前测真机。 
