Question

我有一个＆＃39; .home＆＃39; div与背景图像，我想垂直适合所述div。除了使用Mobile Safari浏览iPhone外，它在移动设备上完美运行。

HTML code：

<div id="home" class="home">  <!-- This div has a background image -->
    <div class="overlay sections">
        <div class="container text-center">
            <div class="row">
                <div class="div-menu">
                    <header class="cd-header">
                        <div id="cd-logo">
                            <a href="index.html"><img id="logo-animated" src="assets/images/logos/vera_sing_logo.png" alt="Logo"></a>
                        </div>
                        <a class="cd-menu-trigger" href="#main-nav"><span></span></a>
                    </header>
                </div>
            </div>
        </div>
    </div>
</div>

这是CSS：

    .home{
        background: url(../images/horizontal/home.jpg) no-repeat center top fixed;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        width: 100%;
        overflow: hidden;
    }

我有一个开放的存储库，因此您可以在此处查看网站（和源代码）：https://fieel.github.io/VeraSings/

如果您碰巧使用Mobile Safari打开它，您只能看到图片的左上角，这显然不正确。这是正确的，使用我的Android设备使用移动Chrome进行浏览：

导致兼容性问题的原因是什么？我的CSS中哪些部分打破了Mobile Safari上的内容？

Answer 1

因为data-attachment : fixed没有真正起作用。看一会儿https://codepen.io/gentlemedia/pen/JJEzwO

div背景图像和iOS Mobile Safari兼容性问题

1 个答案: