background-image需设容器宽高、正确路径、background-size等才生效；body可同时有背景色和图，但color须在image前；fixed在移动端常失效，建议用scroll替代；background为复合属性，避免与单属性混用。
background-image 用法和常见失效原因
直接写 background-image: url(路径) 很容易不显示，不是路径错就是被覆盖。最常踩的坑是：没设 height 或容器高度为 0，图片自然看不见；或者父元素用了 background-color 却没加 background-size，导致图片被裁或拉伸变形。
实操建议：
- 确保容器有明确宽高，比如
min-height: 100vh或height: 500px - 路径优先用相对路径，根目录开头写
/img/bg.jpg，当前目录用./bg.jpg，别用 Windows 风格的\img\bg.jpg - 加上
background-size: cover（铺满）或contain（完整显示），否则默认按原尺寸平铺 - 如果背景图和文字重叠，记得加
background-repeat: no-repeat和background-position: center
body 背景颜色和图片能同时存在吗
能，而且很常用——比如浅色背景色打底，再叠一张半透明纹理图。但顺序很重要：background-color 必须写在 background-image 前面，否则会被覆盖；也可以合并写成一条声明。
实操建议：
- 推荐写法：
background: #f0f0f0 url(./bg.png) no-repeat center / cover，斜杠前是颜色/图片，斜杠后是background-size和background-position - 不要分开写两行
background-color和background-image，CSS 解析时后者会覆盖前者 - 想让颜色“透出来”，把图片做成带透明通道的
.png，别依赖opacity——它会把整个元素变透明
background-attachment: fixed 在手机上失效怎么办
这个属性在 iOS Safari 和部分安卓浏览器里默认被禁用，尤其页面有 overflow: scroll 或使用了某些 CSS 滚动优化时。不是你代码错，是浏览器策略限制。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 别强求移动端实现视差效果，改用
background-attachment: scroll+background-size: cover更稳妥 - 如果必须做视差，得用 JS 监听滚动事件手动更新
transform: translateY()，但要注意性能，加throttle - 测试时一定要真机打开，模拟器可能不触发该限制
CSS 里 background 和 background-image 的区别
background 是复合属性，一次设颜色、图片、重复、位置、尺寸；background-image 只管贴图。混用时容易出问题——比如先写了 background: #fff，再单独写 background-image: url(x)，结果图片没显示，因为 background 展开后默认清空了 background-image。
实操建议：
- 要么全用
background复合写法，要么全用单属性（background-color、background-image等），别交叉写 - 检查 Chrome DevTools 的 Styles 面板，看哪条声明被划掉（strikethrough），往往是被后面的
background覆盖了 - 需要动态换图时，JS 改
element.style.backgroundImage比改background更安全
背景设置看着简单，但路径、层叠顺序、移动端兼容、复合属性覆盖这四点，随便漏一个就白调十分钟。
