正确写法是 background: #f0f0f0 url(./bg.jpg) no-repeat center/cover；颜色须在前、图片在后，斜杠前为 position、后为 size，且需设 min-height: 100vh 和 background-size，background-attachment: fixed 在移动端失效，应降级处理。
直接用 background-color 和 background-image 就能设，但顺序、路径、尺寸控制不对，图就看不见，颜色也被盖掉。
body 同时加背景色和背景图为什么只显示一个
因为 CSS 层叠规则里，background-image 会覆盖 background-color —— 如果你分开写两行，后写的那条生效；如果合并用 background 简写，顺序错了也会丢值。
- 正确写法是：把颜色放前面，图片放后面，比如
background: #f0f0f0 url(./bg.jpg) no-repeat center/cover; - 斜杠
/前是position，斜杠后是size，别颠倒 - 千万别这样写：
background-color: #fff; background-image: url(...);—— 第二行会把第一行“吃掉”，哪怕颜色只是兜底用 - 想让颜色在图底下透一点，用带 alpha 的
rgba()配合 PNG 透明图，别给整个body加opacity
background-image 路径写对了还是不显示
90% 是容器没高度、图片路径错位、或默认平铺被裁剪。浏览器不会报错，只会默默留白。
- 确保
body或目标元素有明确高度，比如加min-height: 100vh;，否则高度为 0，图再大也看不到 - 路径优先用相对路径：CSS 文件和图片同在
./img/下，就写url(./img/bg.jpg)；别用 Windows 风格的\img\bg.jpg - 必须配
background-size: cover或contain，否则默认按原图尺寸平铺，小图重复、大图只显左上角 - 加上
background-repeat: no-repeat，不然文字少时满屏都是图
background-attachment: fixed 在手机上失效怎么办
不是你代码错，是 iOS Safari 和多数安卓 WebView 明确禁用了 fixed 对 body 的支持——滚动时强制转成 scroll，这是性能优化，改不了。
- 真要视差效果，得用 JS 模拟（比如监听
scroll改transform: translateY()），或者换用伪元素 +position: fixed定位到视口 - 更稳妥的做法是直接删掉
background-attachment: fixed，改用scroll（默认值），然后靠background-position: center+background-size: cover保持视觉稳定 - 如果设计稿强依赖 fixed 效果，建议跟 UI 确认降级方案：比如移动端切纯色+纹理叠加图，不硬撑视差
最常被忽略的是：背景图加载失败时页面一片空白——所以 background-color 不是可选项，是必填兜底项；还有就是所有尺寸类属性（background-size、min-height）缺一不可，不是“写了就行”，是“必须写对位置、单位、组合”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
