CSS背景-位置在Mobile Safari (iPhone/iPad)中不起作用
CSS背景-位置在Mobile Safari (iPhone/iPad)中不起作用
提问于 2010-07-06 12:16:35
我对移动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)，以便在任何大小的浏览器上占用空间。
附注:我知道可能有一些更有效的CSS快捷方式可以使用，但现在我喜欢代码的组织方式，就像我有可见性一样。
回答 5
Stack Overflow用户
发布于 2011-02-28 01:28:58
当放置在body标签中时，iPhone/Webkit浏览器不能居中对齐背景图像。解决这个问题的唯一方法是从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>Stack Overflow用户
发布于 2010-12-07 00:35:50
显然，当您在iPhone / iPad上“滚动”时，滚动页面的方式与在桌面浏览器中的方式不同。您所做的更像是在视口中移动整个页面。(如果我在这里使用了错误的术语，我相信有人会纠正我的。)
这意味着background-position: fixed仍然“受支持”，但没有真正的效果，因为整个页面是在视区内移动的，而不是页面内容在页面内滚动。
Stack Overflow用户
发布于 2013-08-22 19:03:30
它将与
background-position-x: 50%;
background-position-y: 0%;并且仍然会添加
background-position: center top;适用于其他浏览器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3183467
复制相关文章
相似问题