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

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

Parallax Scrolling with CSS: background-image not displaying

html

css

scroll

parallax