Html 使用 background-attachment:fixed 在 iPad 上的 safari 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3011226/
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
Using background-attachment:fixed in safari on the ipad
提问by chris_bcn
I'm looking to recreate an effect similiar to the popular science app. Basically have one big background image and then have HTML/CSS layer on top of that. When the user scrolls the content, then background-position of the image should remain in place, and not scroll.
我希望重新创建类似于科普应用程序的效果。基本上有一个大背景图像，然后在其上有 HTML/CSS 层。当用户滚动内容时，图像的背景位置应保持原位，而不是滚动。
Obviously in a 'regular' browser I would use background-attachment:fixed, but this doesn't seem to work on the ipad. I know position:fixed doesn't work as you might expect according to safari spec - but is there any way of achieving this?
显然，在“常规”浏览器中，我会使用 background-attachment:fixed，但这似乎不适用于 ipad。我知道根据 safari 规范， position:fixed 不能像您期望的那样工作 - 但是有什么方法可以实现这一点吗？
回答by Angolao
You can use this code to make a fixed background layer to hack this problem.
您可以使用此代码制作固定背景层来解决此问题。
#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;
}
And put <div id="background_wrap"></div>into <body></body>
并把<div id="background_wrap"></div>成<body></body>
<body>
<div id="background_wrap"></div>
</body>
回答by lg365
Expanding on Anlai's answer above, I found that solution was repeating my image as I was scrolling rather than keeping it fixed. If anyone else had this problem my CSS for the background_wrap ID is as follows:
扩展上面安来的回答，我发现解决方案是在滚动时重复我的图像，而不是保持固定。如果其他人有这个问题，我的 background_wrap ID 的 CSS 如下：
#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;
}
Just changed the background size and background attachment to make the image static.
只是改变了背景大小和背景附件，使图像静态。
回答by codewrangler
Mobile safari scales your whole site down to it's viewport size, including the background image. To achieve the correct effect, use the -webkit-background-size CSS property to declare your background size:
Mobile safari 将您的整个站点缩小到其视口大小，包括背景图像。要获得正确的效果，请使用 -webkit-background-size CSS 属性来声明您的背景大小：
-webkit-background-size: 2650px 1440px;
(hat tip to commenter Mac)
（给评论者Mac 的帽子提示）
回答by Alexander
I believe you can place the background image in a div and set the z-index to appear behind other content. Afterwards you can use javascript to fix the position of the div which contains the background image.
我相信您可以将背景图像放在 div 中并将 z-index 设置为显示在其他内容后面。之后，您可以使用 javascript 来修复包含背景图像的 div 的位置。
回答by John
I'm not that profi one, but I've solved this problem usin' jquery. It's quite simple) Here is the code:
我不是那个专业人士，但我已经使用 jquery 解决了这个问题。很简单）代码如下：
jQuery(window).scroll(function(){
var fromtop = jQuery(window).scrollTop();
jQuery(" your element ").css({"background-position-y": fromtop+"px"});
});回答by Andy
Similar to Ig365, I found that Angolao's solution causes image repeat, depending on image proportions; however, Ig365's image doesn't mimic the placement of background-fixed. To do this, add a background-position-x: 50%;. (Depending on your image dimensions, you may also need background-position-y: 50%.)
和Ig365类似，我发现安哥拉的解决方案会导致图像重复，取决于图像比例；然而，Ig365 的图像并没有模仿background-fixed. 为此，请添加一个background-position-x: 50%;. （根据您的图像尺寸，您可能还需要background-position-y: 50%。）
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
background-position-x: 50%;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('imageURL');
background-repeat: no-repeat;
}
回答by Fellipe J. de Sousa
next solution in Css:
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;
}
--- not use---- (cause: scroll disable )
--- 不使用----（原因：滚动禁用）
position: fixed
Resolved in Ipad and iPhone
在 Ipad 和 iPhone 中解决
