DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 的免费积分！
CSS 中的 background-attachment 属性指定如何相对于视窗移动背景。
有三个值：scroll、fixed 和 local。 最好的解释方法是通过演示（尝试滚动各个背景）
查看 Timothy Miller 在 CodePen 上的笔 背景附件演示 (@tjacobdesign)。
在谈论 background-attachment 时，有两种不同的视图需要考虑：主视图（浏览器窗口）和局部视图（您可以在上面的演示中看到它）。
scroll 是默认值。 它随主视图滚动，但在局部视图内保持固定。
fixed 无论如何都保持固定。 它有点像物理窗口：移动窗口会改变你的视角，但不会改变窗口外部事物的位置。
local 是因为默认的 scroll 值的行为类似于固定背景。 它与主视图和局部视图一起滚动。 你可以使用它做一些很酷的事情。
相关
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
更多资源
浏览器支持
fixed 和 scroll 值在所有地方都受支持，尽管 fixed 可能在移动设备上表现奇怪。 local 具有以下浏览器支持
此浏览器支持数据来自Caniuse，其中有更多详细信息。 数字表示浏览器从该版本开始支持该功能。
台式机
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 25 | 9 | 12 | 5 |
移动设备/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.2-4.3 | 12.2-12.5 |
Chrome-on-Android 支持 local，但旧版 Android 浏览器不支持。
嗨，我是你网站和教程的忠实粉丝！
我正在开发这个网站：http://nest.gov.ph/visitors，我在底部部分和关于页面使用了一些固定背景，有点像视差效果，但不是完全一样。我的问题是它在台式机上工作，但在平板电脑和移动设备上，背景会随着内容滚动。我怎样才能让它在这些设备上工作？你有没有关于这方面的教程？谢谢
你可以在 css 文件中的媒体查询中手动修改
小心，这在移动设备/平板电脑上不起作用 -> chrome android
谢谢
https://tipscodeblog.wordpress.com/
在 Mac 上的 Chrome 53 中存在一个错误，导致 background-attachment: local 无法正常工作，除非你同时为该元素设置 border-radius。并且 border-radius 的值必须大于 0。
Windows 10 上的 Chrome 51 也存在相同的错误。
更多信息：http://www.quirksmode.org/blog/archives/2016/07/the_backgrounda.html
Firefox 59 中存在一个错误，导致页面在滚动到带有 background-attachment: fixed 的元素上时会抖动。
错误状态报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1418923
… 当你同时对该元素应用了 css 过滤器时。