有没有 CSS/Modernizr 方法，可以知道浏览器是否支持 background-attachment:fixed ？
我同时使用 background-size 和 background-attachment
background-size:cover;
background-attachment:fixed;
如果它不支持，它仍然对背景大小有影响，我想阻止它。
我更喜欢 Modernizr 方式（比如新测试）。
您可以在此处看到 2 个大“视差”图像（向下滚动） - 使用 css 类：
“视差图像 1”、“视差图像 2”。
【问题讨论】：
我最近也一直在努力解决这个问题。我在设计中有视差条，iOS 用户报告说这些 a) 中的背景图像严重失真，并且 b) 没有视差。我没有 iOS 设备，因此我不得不通过其他人进行调试，但似乎 iOS 故意禁用了视差效果等滚动更新，这在 Chrome 和 Safari 中都会发生。
我无法找到一种方法让视差背景在 iOS 上工作（尽管我注意到有一些 SquareSpace 和其他网站通过将它们换成缩放的内联图像来实现这种效果，这更复杂和时间 -消费比我愿意尝试的东西应该只是工作）。因此，我决定通过重置 background-attachment 值以仅在 iOS 上滚动这些元素来简单地禁用 iOS 的视差效果。由于 Modernizr 检测功能而不是浏览器，因此我不得不使用此脚本检测所有 iOS 设备，然后设置 CSS 样式以覆盖固定值：
https://gist.github.com/jsoverson/4963116
那么我的 CSS 是：
.device-ios .parallax-strip {
background-attachment:scroll !important;
}
这并不理想（它是一种依赖于设备的 hack，它会降低体验），但考虑到 Apple 对 iOS 视差的敌意（可能是因为它会影响性能），我认为我可以接受它。
希望对其他人有所帮助。
【讨论】：
iOS 13 不支持background-attachment: fixed 属性，您需要一个回退函数来克服这个问题。 fallback 函数需要检查设备是 iPhone 还是 iPad。
var usrAgent = window.navigator.userAgent;
if (usrAgent.match(/iPad|iPhone/i)) {
// then do something
}
【讨论】：
我在另一个问题中找到了答案，所以我不确定它是否有效，但尝试一下也无妨:)
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;}
并放入
<body><div id="background_wrap"></div></body>
【讨论】：