图片背景为页面 header w/Responsive 白色 Space 下面
Image background as page header w/Responsive White Space Below
我正在尝试从以下站点复制 header 图片背景：http://vistachurchslo.com/sundays/what-to-expect
每个页面都有一个带有背景图片的 header。无论浏览器 size/aspect/orientation window 背景图像下方总是 white-space（空白水平区域）。图片总是填满浏览器 window（除了下面的栏）。在您 scroll/swipe 向下之前，页面文本不可见。
这可以用简单的 CSS 来完成，还是我也需要 javascript？如果能帮我解决这个问题，我将不胜感激。
附上图片以帮助查看效果。
谢谢！
"white-space below the background image" 不仅仅是一个酒吧。那是下一个部分标签。如果您查看该部分的 css：
background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url("https://uploads-ssl.webflow.com/571fb2df2ab0dfe37255621b/59d667e68849c400014a5c31_outside-vets2-hd.jpg");
background-position: 0px 0px, 50% 50%;
background-size: auto, cover;
background-repeat: repeat, repeat;
background-attachment: scroll, fixed;
height: 90%;
所以他们将背景设置为图像，将其大小设置为覆盖该部分，然后将部分的高度设置为 90%。这意味着下一部分的 10% 将可见，也就是您看到的 "white-space"。
至于滚动，这是简单的屏幕擦除。我找到了 Scrollmagic really useful for that when I was beginning. It allows you to add a "scene" for each tag you choose (in this case, the sections") and then add a pin to achieve that screenwipe effect. Here's 个演示。
我正在尝试从以下站点复制 header 图片背景：http://vistachurchslo.com/sundays/what-to-expect
每个页面都有一个带有背景图片的 header。无论浏览器 size/aspect/orientation window 背景图像下方总是 white-space（空白水平区域）。图片总是填满浏览器 window（除了下面的栏）。在您 scroll/swipe 向下之前，页面文本不可见。
这可以用简单的 CSS 来完成，还是我也需要 javascript？如果能帮我解决这个问题，我将不胜感激。
附上图片以帮助查看效果。
谢谢！
"white-space below the background image" 不仅仅是一个酒吧。那是下一个部分标签。如果您查看该部分的 css：
background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url("https://uploads-ssl.webflow.com/571fb2df2ab0dfe37255621b/59d667e68849c400014a5c31_outside-vets2-hd.jpg");
background-position: 0px 0px, 50% 50%;
background-size: auto, cover;
background-repeat: repeat, repeat;
background-attachment: scroll, fixed;
height: 90%;
所以他们将背景设置为图像，将其大小设置为覆盖该部分，然后将部分的高度设置为 90%。这意味着下一部分的 10% 将可见，也就是您看到的 "white-space"。
至于滚动，这是简单的屏幕擦除。我找到了 Scrollmagic really useful for that when I was beginning. It allows you to add a "scene" for each tag you choose (in this case, the sections") and then add a pin to achieve that screenwipe effect. Here's 个演示。