图像背景作为页面标题，下方带有响应性空白

Question

我正在尝试从以下站点复制标题图像背景：http://vistachurchslo.com/sundays/what-to-expect

每个页面的标题都带有背景图像。无论浏览器窗口的大小/方向/方向如何，在背景图像下方总会有空白（水平空白区域）。图像始终填充浏览器窗口（下面的栏除外）。在向下滚动/滑动时，页面文本不可见。

这可以通过普通CSS来完成，还是我也需要JavaScript？我真的很感激能解决这个问题。

附有图像以帮助查看效果。

谢谢！

Answer 1

“背景图片下方的空白”不仅仅是一个条。这是下一个小节标记。如果您查看该小节的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％是可见的，即您所看到的“空白”。

对于滚动，这是简单的屏幕擦除。我刚开始时发现Scrollmagic对此非常有用。它允许您为选择的每个标签添加一个“场景”（在本例中为“部分”），然后添加一个引脚以实现该屏幕擦除效果。Here's一个演示。