Question

我在移动版游戏中遇到了背景位置问题。它适用于其他桌面浏览器，但不适用于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;
}

“background_top.png”和“background_bottom.png”都向左移动太远。我已经用Google搜索了，据我所知，移动版Safari支持背景位置 IS 。我也尝试了关键字的每个组合（“顶部”，“中心”等），px和％。有什么想法吗？

谢谢！

更新：这是.html文件中的标记，显示设计＆amp;在其他浏览器中布局很好:(我也更新了上面的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>

两张背景图片都非常宽（约2000像素），以便在任何尺寸的浏览器上占用空间。

P.S。我知道我可能会使用一些更有效的CSS快捷方式，但是现在我喜欢将代码组织起来，就像我有可见性一样。

Answer 1

当放置在body标签中时，iPhone / Webkit浏览器无法居中对齐背景图像。解决此问题的唯一方法是从正文标记中删除背景图像，并使用其他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>

Answer 2

显然，当您在iPhone / iPad上“滚动”时，您不会像在桌面浏览器中那样滚动页面。你正在做的更像是在视口中移动整个页面。（如果我在这里使用错误的术语，我相信有人会纠正我。）

这意味着background-position：fixed仍然是“支持”但没有实际效果，因为整个页面在视口中移动而不是在页面内滚动的页面内容。

Answer 3

它可以与

一起使用

background-position-x: 50%;
background-position-y: 0%;

仍然添加

background-position: center top;

适用于其他浏览器。

Answer 4

创建一个包装器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;
}

确保您的所有内容都不在div中，否则整个页面都会被修复而不会滚动。

Answer 5

我有这个问题，我正在通过使用这里提到的单独样式摆脱我的固定页脚来解决它：How to target CSS for iPad but exclude Safari 4 desktop using a media query?

Answer 6

这可能是由精灵的尺寸引起的。有关完整说明和可能的解决方案，请参阅http://teknocat.org/blog/computer-stuff/web-development/show/6/mobile-safari-background-image-scaling-quirk。

CSS后台位置无法在Mobile Safari（iPhone / iPad）中运行

6 个答案: