使用CSS进行视差滚动：不显示背景图像

Question

所以我试图用css3来实现视差滚动。 我坚持使用w3schools教程，但我的图像没有显示在我的网页上。 这是我的HTML：

    <!--Main Content-->
<main>
    <div class="parallaxBG">

    </div>
</main>

这是我的CSS：

.parallaxBG {
    background-image: url("Resources/Images/2018-01-03_17.07.41.png");
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

任何人都可以回答吗？

Answer 1

将所有父元素设置为100％的高度，否则你的视差div将没有100％的高度填充，并且只有0的高度，直到你在该div中放入一些内容才会显示任何内容

所以喜欢：

body, html, main{height:100%;}