Фон изображения как заголовок страницы с отзывчивым пробелом ниже - PullRequest
Новая
       9

Фон изображения как заголовок страницы с отзывчивым пробелом ниже

0 голосов
/ 05 сентября 2018

Я пытаюсь скопировать фоновое изображение заголовка со следующего сайта: http://vistachurchslo.com/sundays/what-to-expect

Каждая страница имеет заголовок с фоновым изображением. Независимо от размера / аспекта / ориентации окна браузера ВСЕГДА есть пустое пространство (пустая горизонтальная область) под фоновым изображением. Изображение всегда заполняет окно браузера (за исключением панели под ним). Текст страницы не виден, пока вы не прокрутите или проведете пальцем вниз.

Можно ли это сделать с помощью простого CSS или мне также нужен javascript? Я был бы очень признателен за любую помощь в выяснении этого.

Изображение прикреплено, чтобы помочь увидеть эффект. enter image description here

enter image description here

СПАСИБО!

1 Ответ

0 голосов
/ 05 сентября 2018

«Пробел под фоновым изображением» - это не просто полоса. Это следующий тег раздела. Если вы посмотрите на 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 действительно полезным для этого, когда я начинал. Это позволяет вам добавить «сцену» для каждого выбранного вами тега (в данном случае, разделов), а затем добавить пин-код для достижения этого эффекта очистки экрана. Вот демонстрационная версия.

...