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

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 演示。