我正在寻找类似于流行科学应用程序的效果。基本上有一个大的背景图像，然后在上面有HTML/CSS层。当用户滚动内容时，图像的背景位置应该保持原样，而不是滚动。使用background-attachment：修复了ipad上的Safari浏览器
很明显，在一个'普通'浏览器中，我会使用background-attachment：fixed，但是这似乎不适用于ipad。我知道位置：根据Safari的规格，固定不起作用，但有什么办法可以实现这一点？
我相信你可以将背景图像放在div中，并将z-index设置为出现在其他内容之后。之后，您可以使用JavaScript来修复包含背景图片的div的位置。
移动Safari浏览器将您的整个网站缩小到它的视口大小，包括背景图像。为了达到正确的效果，使用WebKit的背景大小的CSS属性声明你的背景大小：
-webkit-background-size: 2650px 1440px;
（帽尖到评议Mac）
无法正常工作，在iPad 1上试用过。 – 2012-07-03 11:32:10
它解决了我在iPad 3 Retina/IOS8上的问题。谢谢 – 2014-12-30 02:31:26
您可以使用此代码，以一个固定的背景层来解决这个问题。
#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;
}
并把<div id="background_wrap"></div>到<body></body>
<body>
<div id="background_wrap"></div>
</body>
下一个解决方案在CSS中：
body {
background-image: url(../images/fundobola.jpg);
background-position: top center;background-repeat:no-repeat;
background-size: 1900px 1104px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
---不使用----（原因：滚动禁用）
position: fixed
解决Ipad和iPhone
......但'-moz-'是Mozilla，而不是iPhone（= Webkit）前缀？ – 2015-03-30 20:36:33
完全不起作用。还有什么'font-family：Arial;'身体上的利润率与解决方案有关？ – Rocco 2015-11-13 00:19:39
在上面Anlai的回答中，我发现解决方案是在滚动而不是保持固定的情况下重复我的图像。如果其他人有这个问题我的CSS为background_wrap ID如下：
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('../images/compressed/background-mobile.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
只是改变了背景大小和背景附件，使图像静态。
我不是那个profi的人，但我用jquery解决了这个问题。 这是很简单的） 下面是代码：
\t jQuery(window).scroll(function(){
\t \t var fromtop = jQuery(window).scrollTop();
\t \t jQuery(" your element ").css({"background-position-y": fromtop+"px"});
\t });
[与ios7固定背景图片]的可能的复制（http://stackoverflow.com/questions/20443574/fixed-background- image-with-ios7） – 2016-08-05 22:52:51