Question

我在以下网站的<body>元素上实现了背景图片：http://www.bestdiscointown.co.uk/dev/ - 这样当用户滚动到页面底部时就会显示图像（以下屏幕截图显示了这在Firefox中的工作情况：

这是通过以下CSS实现的，并且在大多数Web浏览器中都很好用：

body {
    color: #fff;
    font-family: 'proxima_nova_ththin';
    background-image:  url("custom-assets/img/body_bg.jpg");  
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

但是，在iOS 9.3.5上的Safari中查看时会出现以下问题并且背景图像会中断：

是否有理由发生此问题，是否可以设置background-attachment: fixed;？
可以在我的CSS中应用修复程序来解决此问题吗？

Answer 1

众所周知，由于存在性能问题，iOS不会保留背景（通过background-attachment: fixed）。您可以在此处阅读更多内容：https://stackoverflow.com/a/23420490/1887218

您可以执行一种解决方法，并将背景添加到已设置position: fixed的全屏包装器中。见这里：https://stackoverflow.com/a/12770538/1887218

Answer 2

我认为你缺少背景尺寸：封面;或者你必须重复你的背景

body {
    color: #fff;
    font-family: 'proxima_nova_ththin';
    background-image:  url("custom-assets/img/body_bg.jpg");  
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

在身体上设置的背景图像上切断的问题 - iOS / Safari

2 个答案: