【问题标题】：Background Picture not showing on iphone (safari) [duplicate]背景图片未在iphone（safari）上显示[重复]
【发布时间】：2019-07-04 12:55:35
【问题描述】：

当我在 iPhone 或其他任何人上打开背景图片时，它不显示。在 Android 设备上，它可以正常工作，在 Safari 中的计算机上，它也可以正常工作。

HTML

<section id="home" class="header">
    <div class="v-middle">
        <div class="container">
            <div class="row">
                <div class="caption">
                    <h5>Hello</h5>
                    <h1 class="headline-Text">I Am <span id="animated-      Text"></span></h1>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

#home {
  background: url("../images/header-background.jpg") no-repeat center center   fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
}

【问题讨论】：

标签： html css safari

【解决方案1】：

background-attachment: fixed 存在巨大的性能问题read here。

浏览器需要在新位置重新绘制图像相对于它的 DOM 元素每次我们滚动，这种重新绘制对于移动浏览器来说成本更高，这就是为什么大多数他们已禁用此功能。

我会建议使用媒体查询并将您的规则更改为background-attachment: scroll; 用于移动设备。如果您的项目在移动设备上仍需要此功能，请考虑使用 Scrollmagic 之类的插件

【讨论】：

【解决方案2】：

正如@ram pandey 建议的那样，我使用了媒体查询：

@media only screen and (max-width: 600px) {
#home {
    background: #000;
    background: url("../images/header-background.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    }
  }

【讨论】：