不少官网首页有大图 banner，页面向下滚动时，文字内容从图上滑过去，图却纹丝不动，这就是 background-attachment 设成 fixed 的效果。这个属性决定背景是跟着元素滚、跟着内容滚，还是钉在视口上不动。
三个取值的区别
- scroll：默认值，背景随元素本身滚动，元素不动背景就不动
- fixed：背景相对浏览器视口固定，滚动页面时它不动，视差效果的主力
- local：背景随元素内容滚动，元素内部滚动条一动，背景跟着动
scroll 和 local 的区别在容器内部滚动时才看得出：内容区有 overflow 滚动条时，scroll 的背景停在原地，local 的背景会跟着内容一起滚。给带滚动的聊天窗口、代码块加背景纹理，local 才是想要的效果。多背景图也能各配各的取值，逗号隔开，写法和 background-repeat 一致。
fixed 的兼容坑
手机上要小心：iOS 的 Safari 对 background-attachment: fixed 支持很差，多数情况表现成不生效或者渲染异常。移动端要视差效果，一般用伪元素加 transform 的方案替代，或者干脆降级成普通滚动背景。另外 fixed 生效时，background-position 和 background-size 都是相对视口计算的，定位和预期不符多半是这个原因。
性能也留意一下
fixed 背景在某些设备上滚动时会反复触发重绘，页面滑动卡顿的话，先把 fixed 关掉试试。大面积的大图固定背景对低端机不友好，能不用就不用。
实际取舍：桌面端官网首屏做视差，fixed 一行代码就够；移动端一律按不支持它来做，效果换别的方式实现，省得在不同手机上反复调试。