17

我在移动 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;
}

“background_top.png”和“background_bottom.png”都向左移动了太远。我已经用谷歌搜索了，据我所知，移动 safari 支持背景位置。我还尝试了关键字（“top”、“center”等）、px 和 % 的所有组合。有什么想法吗？

谢谢！

更新：这是 .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>

两个背景图像都非常宽（~2000px），以便在任何大小的浏览器上占用空间。

PS 我知道我可能会使用一些更有效的 CSS 快捷方式，但现在我喜欢将代码组织起来，就像我为了可见性而设计的那样。

4

5 回答 5

9

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>
于 2011-02-27T17:28:57.703 回答
5

它会与

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

并且仍然添加

background-position: center top;

对于其他浏览器。

于 2013-08-22T11:03:30.367 回答
4

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

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

于 2010-12-06T16:35:50.163 回答
2

创建一个包装器 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 ，否则整个页面将被固定而不会滚动。

于 2015-01-13T09:44:56.007 回答
0

我有这个问题，我正在通过使用此处提到的单独样式摆脱固定页脚来解决它：如何为 iPad 定位 CSS 但使用媒体查询排除 Safari 4 桌面？

于 2011-01-19T19:19:01.570 回答