Question

我已经建立了一个网站并在所有浏览器上进行了测试，而在Chrome中，视差效果并不起作用，有时我必须刷新或图像不会显示。我真的很感激如何解决这个问题。

这是我的代码

HTML

<div class="inspire parallax-section">
    <div class="parallax-content">
        <div class="container">
                <h2>A brand is no longer what we tell the consumer it is – it is what consumers tell each other it is.</h2>

        </div>
    </div>
    <!-- end parallax-content -->
</div>
<!-- end inspire -->

CSS

.inspire{
    background-image: url(http://i.imgur.com/EXfjCjv.jpg);
}

.container{
    width: 100%;
    text-align: center;
}

.parallax-section{
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    color: #fff;
}

.parallax-content{
    padding: 120px 0 105px 0;
    background: #000;
    background: rgba(0, 0, 0, .6);
}

.parallax-content h2{
    font-size: 36px;
    font-size: 3.6rem;
    margin: 65px 0 80px 0;
}

这是我的实时代码：https://jsfiddle.net/fLgtqve8/embedded/result/

Parallax不适用于Chrome

0 个答案: