我的页面主体上有一个背景图像，它应该垂直和水平居中并覆盖 Canvas 。
body {
background: #000;
overflow: hidden;
background: url(background_phone_2.jpg) no-repeat center center fixed;
background-size: cover;
}
在 Chrome/Firefox 和所有移动浏览器中，图像垂直和水平居中并覆盖 Canvas 。在桌面版 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 正在考虑 body 区域来覆盖顶部导航栏，这会影响我的垂直居中，因为页面内容不会以这种方式考虑。有没有办法从 dom 中禁用该效果？
最佳答案
仅使用这些属性进行尝试；
background-image: url(background_phone_2.jpg);
background-repeat:no-repeat;
background-position: center center;
background-attachment: fixed;
这应该有效。
如果没有，为什么不把图片做成div，然后用z-index让它成为背景呢？这比 body 上的背景图像更容易居中。
除了那个尝试:
background-position: 0 100px;/*使用一个将居中的像素值*/ 或者我认为如果你已经设置了 body min-height<，你可以使用 50%/ 到 100%。
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%;
}
希望对您有所帮助。
关于css - 背景大小:仅在桌面 Safari 中封面不垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31933412/