在 iOS5 中固定工作的背景附件？答案

【问题标题】：does a background-attachment of fixed work in iOS5?在 iOS5 中固定工作的背景附件？
【发布时间】：2012-04-04 11:18:22
【问题描述】：

这适用于 > iOS 5 吗？

.element {
    background: url(images/myImage.jpg) 50% 0 no-repeat fixed;
}

我认为它应该，但到目前为止它不是。

【问题讨论】：

在什么方面不工作（不固定，没有背景等）？
背景图片似乎没有修复。它随着内容滚动。
我之前的评论删了，看我的回答吧。
我有同样的结果。这很奇怪。
和我的回答一样吗？

标签： css ios

【解决方案1】：

移动设备和触控设备上的固定位置问题太多了。

只要背景没有以任何方式进行动画处理（模糊、css 转换任何 JS）并且只要没有滚动条，那么它是可用且一致的。

其他一切都将取决于浏览器 - 导致不良结果、图像像素化、图像在 IOS 设备上缩放 100 倍、“跳跃”div 等。

到目前为止我发现的最好的解决方法，比如说，如果你想重现一个固定的 BG 滚动页面，是使用视差方法，让一个 div 作为滚动，下一个背景透明，冲洗重复。

我认为它看起来足够好，不需要插件。

【讨论】：

【解决方案2】：

您可以使用单独的元素和position: fixed 来解决这个问题！

HTML：

<div id="Background"></div>

<div id="Content"></div>

CSS：

#Background {
    background: #000 url("img/Background.jpg") no-repeat 50% 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}

【讨论】：

将此添加到#Background：z-index：-1;
不知道为什么这之前没有被赞成 - 这是处理问题的正确方法，这里值得一提的是background-attachment不能更改，但是 i> 获得所需结果的正确方法是<img id="bg-img" src="foo.jpg" /> 和#bg-img { position: fixed }
@Brian 语义上，当然；如果是图片，请使用图片标签。但是，使用background-image 有几个优点。通过设置top、bottom、left和right属性，我们确保整个视口都被#Background元素覆盖，但图像本身不会被拉伸。然后，您可以使用background-position 对齐右下角的图像（如果需要）并使用background-size 将图像缩放到视口。
@shshaw 当然，你是对的，但我的观点是，即使存在一些差异，99% 通过背景图像定位寻求的固定定位用例都可以通过编码良好的位置固定图像（适用于 iOS，与背景位置/附件不同）。
@user852974 “滞后”实际上是 Mobile Safari 在滚动停止之前不会使用 position: fixed 刷新任何内容。与实际的 window.scrollTop 值相同，至少在旧版本中是这样。 remysharp.com/2012/05/24/… 在 iOS7 中，如果滚动速度低于一定速度，它似乎会将固定项目保持在原位。如果用户快速滑动，一旦势头停止，元素将重新出现。

【解决方案3】：

据此background-attachment support matrix，没有。

Another post 建议为移动设备想出一个解决方法是不值得的：

...Android 和 iPhone 在滚动期间都会阻止计时器或渲染，因此效果是 div 会随着滚动页面移动，并且仅在之后，最终，div 回到预期的位置。这违背了定位固定的想法

【讨论】：

无赖，希望尽快得到支持。我会尝试不同的属性。