CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用

发布于 2024-09-08 14:51:44 字数 1582 浏览 9 评论 0原文

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

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

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

原文

I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or 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;
}

Both "background_top.png" and "background_bottom.png" are shifted too far to the left. I've googled around, and as far as I can tell, background-position IS supported in mobile safari. I've also tried every combination of keywords ("top", "center", etc.), px, and %. Any thoughts?

Thanks!

Update: here's the markup in the .html file, which displays the design & layout fine in other browsers: (I also updated the above 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>

Both background images are very wide (~2000px) so as to take up space on any sized browser.

P.S. I know that there's probably a few more efficient CSS shortcuts I could be using, but for now I like having the code organized like I have it for visibility.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橘寄 2024-09-15 14:51:45

当放置在 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>

The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper.

#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>

回复收藏 0 原文

一桥轻雨一伞开 2024-09-15 14:51:45

它可以与其他浏览器一起使用

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

，并且仍然可以

background-position: center top;

为其他浏览器添加。

It'll work with

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

and still add

background-position: center top;

for other browsers.

回复收藏 0 原文

翻了热茶 2024-09-15 14:51:45

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

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

回复收藏 0 原文

独孤求败 2024-09-15 14:51:45

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

Create a wrapper ID to place in the body, then include the following 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;
}

Just ensure that none of your content goes within the div otherwise the whole page will be fixed with no scrolling.

回复收藏 0 原文