Html 如何复制固定在 iOS 上的后台附件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23236158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to replicate background-attachment fixed on iOS
提问by QRohlf
I'm trying to get fixed-background-image divs working on iOS for a school project. I've been using
我正在尝试让固定背景图像 div 在 iOS 上为学校项目工作。我一直在用
background-attachment: fixed;
But this is leading to weird sizing and no scrolling effects in mobile safari. Here is the sitethat I'm working with; the method I'm currently using for the quote div image backgrounds works well on desktops but fails completely on iOS.
但这会导致移动 safari 中出现奇怪的大小和没有滚动效果。这是我正在使用的站点；我目前用于引用 div 图像背景的方法在桌面上运行良好，但在 iOS 上完全失败。
Somehow, http://www.everyonedeservesgreatdesign.comgot this working. I'm having difficulty following the code because they're using a squarespace template of some kind, but it looks like they're putting images into a position:fixeddiv that is somehow being clipped by its position:relativeparent div. I was under the impression that it wasn't possible to clip position:fixeddivs with anything other than the viewport, so I'm very curious as to what's going on here.
不知何故，http://www.everyonedeservesgreatdesign.com得到了这个工作。我在遵循代码时遇到了困难，因为他们使用了某种 squarespace 模板，但看起来他们正在将图像放入一个position:fixeddiv 中，该div 以某种方式被position:relative其父 div裁剪。我的印象是position:fixed除了视口之外，不可能用任何东西来剪辑div，所以我很好奇这里发生了什么。
Any ideas on how to implement this method for fixed image div backgrounds in my site?
关于如何在我的网站中为固定图像 div 背景实施此方法的任何想法？
回答by fernandopasik
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 hugerepaint 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
回答by unconditional_loading
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.
在我看来，背景图像实际上并不是背景图像……该站点具有背景图像和兄弟 div 中的引号，其中包含已分配位置的图像的 div 的子级：固定；引号 div 也有一个透明的背景。
wrapper div{
image wrapper div{
div for individual image{ <--- Fixed position
image <--- relative position
}
}
quote wrapper div{
div for individual quote{
quote
}
}
}
