Добавление участка линейного градиента / наложения между двумя контейнерами, чтобы они выглядели как один - PullRequest
Новая
       6

Добавление участка линейного градиента / наложения между двумя контейнерами, чтобы они выглядели как один

0 голосов
/ 01 мая 2018

Я пытаюсь добавить линейный градиент / наложение между двумя контейнерами, чтобы создать впечатление, что страница имеет один фон сверху вниз. Я нахожу это сложным, потому что оба контейнера должны быть 100vh, но так или иначе должны включать зеленый раздел наложения.

Любой совет / подсказка будет высоко оценен.

Вот что я пытаюсь достичь: Пример 1: https://ibb.co/frbLb7 Пример 2: https://ibb.co/czsJw7

Спасибо. 

<body>
    <div class="homepage">
        <div class="content">
            Lorem ipsum
        </div>
        <!-- End content -->
        <div class="green-overlay">
        </div>
        <!-- End homepage -->
        <div class="second-section">
            <div class="content">
            </div>
            <!-- end green-overlay -->
            Lorem ipsum
        </div>
        <!-- End content -->
    </div>
    <!-- End second section-->
</body>

.homepage {
    height: 100% //fallback
    height:100vh;
    background: url("img/homepage.jpg");
    background-size: cover;
}

.green-overlay {
    height: 25vh;
    background: linear-gradient(to bottom, rgba(100, 244, 2, 0.1), rgba(100, 244, 2, 1));
}

.second-section {
    height: 100% //fallback
    height:100vh;
    background-color: rgba(100, 244, 2, 1);
}

1 Ответ

0 голосов
/ 01 мая 2018

Использовать псевдоклассы CSS Подробнее об этом

проверьте этот код на jsfiddle.net

и вот код: 

body {
  margin: 0;
  padding: 0
}

.homepage {
  height: 100%;
  height: 100vh;
  background: url("https://picsum.photos/3872/2592?image=1072");
  background-size: cover;
}

.second-page::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(100, 244, 2, 0.0), rgba(100, 244, 2, 1));
  margin-top: -135px;
  height: 120px;
  width: 100%;
  content: '';
}

.second-page {
  height: 100%;
  height: 100vh;
  background-color: rgba(100, 244, 2, 1);
}
 <body>
  <div class="homepage">
    <div class="content">
      Lorem ipsum
    </div>
    <!-- End content -->
    <div class="green-overlay">
    </div>
    <!-- End homepage -->
   </div>
   <!-- End second page -->
   <div class="second-page">
    <div class="content">
    </div>
    <!-- end green-overlay -->
    Lorem ipsum
   </div>
  <!-- End content -->
</body>
...