HTML

Question

当我在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;
}

Answer 1

background-attachment: fixed的性能问题read here。

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

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

这样的插件

Answer 2

按照@ram pandey的建议，我使用了媒体查询：

unique_subject = no

iPhone无法显示背景图片（Safari）

HTML

CSS

2 个答案: