CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用
Posted
技术标签:
【中文标题】CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用【英文标题】:CSS background-position not working in Mobile Safari (iPhone/iPad) 【发布时间】:2011-03-12 03:21:30 【问题描述】:我在移动 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 支持背景位置 IS。我还尝试了关键字(“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>
两个背景图片都非常宽(~2000 像素),因此在任何大小的浏览器上都占用空间。
附:我知道我可能会使用一些更有效的 CSS 快捷方式,但现在我喜欢将代码组织起来,就像我为可见性而设计的那样。
【问题讨论】:
【参考方案1】: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>
【讨论】:
【参考方案2】:可以使用
background-position-x: 50%;
background-position-y: 0%;
仍然添加
background-position: center top;
对于其他浏览器。
【讨论】:
【参考方案3】:显然,当您在 iPhone/iPad 上“滚动”时,您滚动页面的方式与在桌面浏览器中的滚动方式不同。您所做的更像是在视口中移动整个页面。 (如果我在这里使用了错误的术语,我相信有人会纠正我。)
这意味着 background-position: fixed 仍然“支持”但没有实际效果,因为整个页面在视口内移动,而不是页面内容在页面内滚动。
【讨论】:
你把background-position
和background-attachment
弄混了吗?【参考方案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 中,否则整个页面将被固定而不会滚动。
【讨论】:
【参考方案5】:我遇到了这个问题,我正在通过使用此处提到的单独样式摆脱固定页脚来解决它:How to target CSS for iPad but exclude Safari 4 desktop using a media query?
【讨论】:
以上是关于CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
div背景图像和iOS Mobile Safari兼容性问题
iOS9 mobile safari Landscape css bug with position: fixed;