CSS：背景不显示 iPhone 或 iPad，但适用于 iMac（Safari）答案

【问题标题】：CSS: Background not showing up iPhone or iPad but works on iMac ( Safari )CSS：背景不显示 iPhone 或 iPad，但适用于 iMac（Safari）
【发布时间】：2021-04-19 13:44:51
【问题描述】：

我有一个全宽的英雄背景，它在我们测试的每个浏览器上都能正常工作，除了 iPhone 和 iPad 上的 Safari。它确实适用于 iMac Safari。在 iPhone 和 iPad 上它不会出现。代码如下：

.hero {
    margin: 0;
    padding: 0;
    height: 600px;
    background-image: url('../images/heroFullScreen.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

您可以在此处查看该站点：https://sanitonplastic.ca，如果您拥有其中一台设备，则可以重现该问题。

真的希望有人可以帮忙，我们应该明天上线。

谢谢！

【问题讨论】：

图片没有出现在 chrome 中。但是在 safari 上它出现了：在 chrome 中它没有出现，因为你在这里有这个 fadeonload 类 container-fluid hero 但是，检查一下 - stackoverflow.com/a/31445503/8098173
IOS Safari 不支持 background-attachment 已修复，见 [link]caniuse.com/?search=background%20attachment

标签： css ios iphone ipad background

【解决方案1】：

martinho 和 A Haworth 是正确的。我使用了移动视图的媒体查询并设置了background-attachment: scroll，虽然失去了视差，但它解决了这个问题。

【讨论】：