Fatal编程技术网
  • css/
  • CSS背景位置不适用于Mobile Safari（iPhone/iPad）

CSS背景位置不适用于Mobile Safari（iPhone/iPad）

css mobile safari

CSS背景位置不适用于Mobile Safari（iPhone/iPad）,css,mobile,safari,background-position,Css,Mobile,Safari,Background Position,我对mobile 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; mar

我对mobile 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\u top.png”和“background\u bottom.png”都向左移动过远。我在谷歌上搜索过，据我所知，mobile safari支持背景位置。我还尝试了关键字（“顶部”、“中心”等）、px和%。有什么想法吗

谢谢

更新：这里是.html文件中的标记，它在其他浏览器中显示了良好的设计和布局：（我还更新了上面的css）


标题
两个背景图像都非常宽（~2000px），因此在任何大小的浏览器上都会占用空间

另外，我知道我可能会使用一些更高效的CSS快捷方式，但现在我喜欢将代码按可视性进行组织。

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

这意味着背景位置：固定仍然“受支持”，但没有实际效果，因为整个页面在视口中移动，而不是页面内容在页面中滚动。

我有这个问题，我正在解决这个问题，我使用一种单独的样式去掉固定的页脚，如下所述：

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>

#包装器{
背景色：#000000；
背景图片：url（'images/background_top.png'）；
背景重复：无重复；
背景位置：中上；
溢出：自动；
}
标题
它将与

background-position-x: 50%;
background-position-y: 0%;
并且仍然添加

background-position: center top;
对于其他浏览器。

创建要放置在正文中的包装器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内，否则整个页面将被固定，不会滚动。

您是否混淆了
背景位置
和
背景附件
？ 
#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;
}