CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3183467/
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
CSS background-position not working in Mobile Safari (iPhone/iPad)
提问by Nick
I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or iPad.
我在移动 safari 中的背景位置有问题。它适用于其他桌面浏览器，但不适用于 iPhone 或 iPad。
body {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
padding: 0px;
margin: 0px;
font-family: "Arial";
}
#header {
width: 1030px;
height: 215px;
margin-left: auto;
margin-right: auto;
margin-top: 85px;
background-image: url('images/header.png');
}
#main-content {
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
background-image: url('images/content_bg.png');
background-repeat: repeat-y;
}
#footer {
width: 100%;
height: 343px;
background-image: url('images/background_bottom.png');
background-position: center;
background-repeat: no-repeat;
}
Both "background_top.png" and "background_bottom.png" are shifted too far to the left. I've googled around, and as far as I can tell, background-position ISsupported in mobile safari. I've also tried every combination of keywords ("top", "center", etc.), px, and %. Any thoughts?
“background_top.png”和“background_bottom.png”都向左移动太远。我GOOGLE了四周，据我所知，背景，地位IS在移动Safari浏览器的支持。我还尝试了关键字（“top”、“center”等）、px 和 % 的所有组合。有什么想法吗？
Thanks!
谢谢！
Update: here's the markup in the .html file, which displays the design & layout fine in other browsers: (I also updated the above css)
更新：这是 .html 文件中的标记，它在其他浏览器中显示设计和布局：（我也更新了上面的 css）
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</body>
</html>
Both background images are very wide (~2000px) so as to take up space on any sized browser.
两个背景图像都非常宽（~2000 像素），以便在任何大小的浏览器上占据空间。
P.S. I know that there's probably a few more efficient CSS shortcuts I could be using, but for now I like having the code organized like I have it for visibility.
PS 我知道可能有一些更有效的 CSS 快捷方式我可以使用，但现在我喜欢将代码组织起来，就像我有它的可见性一样。
回答by Jimbola
The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper.
iPhone/Webkit 浏览器在放置在 body 标签中时无法将背景图像居中对齐。解决此问题的唯一方法是从 body 标签中删除背景图像，并使用额外的 DIV 作为包装器。
#wrapper {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
}
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</div>
</body>
</html>
回答by leymannx
It'll work with
它会与
background-position-x: 50%;
background-position-y: 0%;
and still add
并仍然添加
background-position: center top;
for other browsers.
对于其他浏览器。
回答by Squig
Apparently, when you "scroll" on an iPhone / iPad, you're not scrolling the page in the same way as you do in a desktop browser. What you're doing is more like moving the whole page within a viewport. (I'm sure someone will correct me if I'm using the wrong terminology here.)
显然，当您在 iPhone / iPad 上“滚动”时，您滚动页面的方式与在桌面浏览器中的滚动方式不同。您所做的更像是在视口内移动整个页面。（如果我在这里使用了错误的术语，我相信有人会纠正我。）
This means that background-position: fixed is still "supported" but has no real effect, since the whole page is moving within the viewport rather than the page content scrolling within the page.
这意味着 background-position: fixed 仍然“支持”但没有实际效果，因为整个页面在视口内移动，而不是页面内容在页面内滚动。
回答by lg365
Create a wrapper ID to place in the body, then include the following CSS:
创建一个包装器 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 ensure that none of your content goes within the div otherwise the whole page will be fixed with no scrolling.
只要确保您的任何内容都没有进入 div 内，否则整个页面将被修复而不会滚动。
回答by Syntax Error
I have this problem and I'm addressing it by getting rid of my fixed footer using a separate style as mentioned here: How to target CSS for iPad but exclude Safari 4 desktop using a media query?
我遇到了这个问题，我正在通过使用此处提到的单独样式摆脱固定页脚来解决它：How to target CSS for iPad but exclude Safari 4 desktop using a media query？
