关键是使用 background-attachment: fixed 实现背景固定；需配合 background-size: cover、background-position: center 和 background-repeat: no-repeat；ios等设备兼容性差时可用伪元素+position: fixed 模拟。
要让图片背景不随内容滚动，关键是使用 background-attachment: fixed。这是实现“视差式”固定背景的核心属性。
基础写法：用 fixed 锁定背景图
在 CSS 中给需要固定背景的元素（如 body 或某个容器）设置：
- background-image: url('your-image.jpg');
- background-attachment: fixed;
- background-size: cover;（推荐，让图铺满且不失真）
- background-position: center;（居中显示）
- background-repeat: no-repeat;（防止平铺）
常见问题与优化建议
直接用 fixed 在某些场景下可能有兼容性或体验问题：
- iOS Safari 和部分安卓浏览器对
background-attachment: fixed支持有限，可能降级为 scroll；可改用 伪元素 + transform 模拟（更稳定） - 如果背景图在滚动时出现模糊或闪烁，加上
backface-visibility: hidden;或will-change: transform;提升渲染性能 - 避免在内容区域过小的容器上用 fixed 背景，否则视觉上易误判为“没生效”
替代方案：用伪元素实现更兼容的固定效果
适用于需要强兼容性的项目：
- 给目标容器设
position: relative; - 用
::before伪元素插入背景图，并设position: fixed;和z-index: -1; - 通过
top / left / width / height控制覆盖范围，配合transform: translateZ(0);触发硬件加速
一句话总结
最简方式就是加 background-attachment: fixed，但要注意设备兼容性和滚动性能；追求稳定可用伪元素 + fixed 定位模拟，逻辑清晰、控制更灵活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
