html - 如何删除视差背景图像和下一个 div 之间的空白区域？

Question

我在练习 css paralax 时遇到了一个问题:在背景图片和下一个 div 之间有一个白色间隙，您只需更改视口(viewport)的宽度并向下滚动即可看到它。

所以，我的问题是:为什么会发生这种情况以及我应该如何消除它？

A screenshot和 Link on JSFiddle或者CSS 代码:

.car {
    position: relative;
    width: 100%;
    height: 600px;
    background: url(http://i63.tinypic.com/14viwxk.png) no-repeat;
    background-position: top left;
    background-size: contain;
    padding-top: 100px;
    padding-bottom: 0;
    overflow: hidden;
    background-attachment: fixed;
}

.car h1 {
    line-height: 1.2;
}

.car figure {
    width: 40%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    color: white;
}

figure p {
    margin-bottom: 20px;
}

Answer 1

您的图片太小了。将 background-size 更改为 cover 看看你得到了什么