Nic*_*ick 17 css safari mobile background-position
我在移动游猎中遇到了背景问题.它适用于其他桌面浏览器,但不适用于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了四周,据我所知,背景,地位IS在移动Safari浏览器的支持.我也尝试了关键字的每个组合("顶部","中心"等),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快捷方式,但是现在我喜欢将代码组织起来,就像我有可见性一样.
放置在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>
它将与
background-position-x: 50%;
background-position-y: 0%;
并仍然添加
background-position: center top;
对于其他浏览器。
显然，当您在 iPhone / iPad 上“滚动”时，您不会像在桌面浏览器中那样滚动页面。您所做的更像是在视口中移动整个页面。（我确信如果我在这里使用了错误的术语，有人会纠正我。）
这意味着背景位置：固定仍然“受支持”，但没有实际效果，因为整个页面在视口内移动，而不是页面内容在页面内滚动。
| 归档时间： |
|
| 查看次数： |
52909 次 |
| 最近记录： |