1

我的页面主体上有一个背景图像，应该垂直和水平居中并覆盖画布。

  body {
    background: #000;
    overflow: hidden;
    background: url(background_phone_2.jpg) no-repeat center center fixed;
    background-size: cover;
  }

在 Chrome/Firefox 和所有移动浏览器中，图像垂直和水平居中并覆盖画布。在桌面版 Safari 中，图像略低于垂直中心。我做错了什么或者这可能是浏览器错误吗？

这个直播网址是： http: //moonios.com

我已经尝试删除溢出：无以及删除页面的其他内容，但问题仍然存在。

如果您有任何建议或可以确认此错误，我将不胜感激。谢谢！查理

更新：做了更多的工作来解决这个问题。用网格构建这个新页面： http ://whyamicrazytoday.com/safari/

整个页面内容为：

<html>
  <head>
    <title>Safari Background Size Bug</title>
    <style>
      body {
        background-image: url(background.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
      }
    </style>
  </head>
  <body>
  </body>
</html>

仍然只在 Safari 中重现。

Safari 与 Chrome

然后我想起了 Safari 导航栏中的半透明效果（虽然我把它关掉了）。我相信 Safari 正在考虑用正文区域来覆盖顶部导航栏，这会导致我的垂直居中偏离，因为没有以这种方式考虑页面的内容。有没有办法从dom禁用这种效果？

4

2 回答 2

1

仅使用这些属性进行尝试； 

background-image: url(background_phone_2.jpg);
background-repeat:no-repeat;
background-position: center center;
background-attachment: fixed;

那应该行得通。

如果没有，为什么不div使用图像制作一个并将其用作z-index背景？这将比在身体上的背景图像更容易居中。

除此之外尝试：

background-position: 0 100px;/*use a pixel value that will center it*/或者我认为如果您将身体设置min-height为 100%，您可以使用 50%。

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(background_phone_2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

我希望它有所帮助。

于 2015-08-11T06:00:56.270 回答
0

在尝试进行浏览器破解并使用特殊的 CSS 定位 Safari 来解决此问题后，我检查了 El Capitan 并纠正了此行为。所以我打算放弃这个问题。

于 2015-08-11T21:31:44.150 回答