Question

我的页面正文背景图片应垂直和水平居中并覆盖画布。

  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

我尝试删除overflow：none以及删除页面的其他内容，但问题仍然存在。

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

更新：更多的工作是搞清楚这一点。使用网格构建此新页面：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的导航栏中的半透明效果（尽管我关闭了它）。我相信Safari正在考虑覆盖那个顶部导航栏的身体区域，这会导致我的垂直居中，因为页面内容没有被这样考虑。有没有办法从dom中禁用该效果？

Answer 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%;
}

我希望它有所帮助。

Answer 2

在尝试进行浏览器黑客攻击并使用特殊的CSS定位Safari来修复此问题后，我检查了El Capitan，此行为已得到纠正。所以我要放弃这个问题。

background-size：仅在桌面Safari中

2 个答案: