html - 使用 CSS : background-image not displaying 进行视差滚动

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%;}