如何复制 iOS 上固定的背景附件

我正在为一个学校项目找一个固定背景图像的 div，我一直在用

background-attachment: fixed;

但是这导致了移动狩猎中奇怪的尺寸和没有滚动效果。我正在使用的这是网站; 我目前使用的用于引用 div 图像背景的方法在桌面上运行良好，但在 iOS 上完全失败。

不知怎么的，http://www.everyonedeservesgreatdesign.com让这个起作用了。我很难理解这些代码，因为他们使用了某种正方形空间模板，但是看起来他们把图像放到了一个 position:fixed div 中，这个 div 被它的 position:relative父 div 剪切了。我的印象是，它不可能剪辑 position:fixed的 div 与其他任何东西，除了视窗，所以我非常好奇这里发生了什么。

对于如何在我的站点中实现固定图像背景的这个方法有什么想法吗？

224566 次浏览

小开

最佳答案

It has been asked in the past, apparently it costs a lot to mobile browsers, so it's been disabled.

Check this comment by @PaulIrish:

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

you can see workarounds to this in this posts:

Fixed background image with ios7

Fixed body background scrolls with the page on iOS7

小开

It looks to me like the background images aren't actually background images...the site has the background images and the quotes in sibling divs with the children of the div containing the images having been assigned position: fixed; The quotes div is also given a transparent background.

wrapper div{
image wrapper div{
div for individual image{ <--- Fixed position
image <--- relative position
}
}
quote wrapper div{
div for individual quote{
quote
}
}
}