身体上设置的背景图像被切断的问题 - iOS/Safari
Posted
技术标签:
【中文标题】身体上设置的背景图像被切断的问题 - iOS/Safari【英文标题】：issue with cut off on background image set on body - iOS/Safari 【发布时间】：2016-09-09 18:05:11 【问题描述】：我在以下网站的<body> 元素上实现了一个背景图像：http://www.bestdiscointown.co.uk/dev/ - 这是为了在用户滚动到页面底部时显示图像（以下屏幕截图显示了这一点在 Firefox 中工作）：
这是通过以下 CSS 实现的，并且在大多数网络浏览器中都能很好地支持：
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 中应用修复来解决此问题？
【问题讨论】：
【参考方案1】：众所周知，由于假定的性能问题，iOS 不会保持背景固定（通过background-attachment: fixed）。你可以在这里阅读更多：https://***.com/a/23420490/1887218
您可以采取一种变通方法，并将背景添加到设置了position: fixed 的全屏包装器中。见这里：https://***.com/a/12770538/1887218
【讨论】：
【参考方案2】：我认为您缺少 background-size: cover;或者你必须重复你的背景
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的主要内容，如果未能解决你的问题，请参考以下文章