как сделать фиксированный фуллскрин таким образом, чтобы нижний контакт при скролле накладывался на фуллскрин?

Question

Необходимо зафиксировать фуллскрин так, чтобы при скролле следующие блоки накладывались на него.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: 'Courier New', Courier, monospace;
  color: aliceblue;
}

.wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.fullscreen {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fullscreen_bg {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.fullscreen_title {
  position: absolute;
  font-size: 100px;
  z-index: 2;
}

.content {
  display: flex;
  flex-direction: column;
  width: 80%;
  padding: 30px 40px;
  margin: 0 auto;
  background-color: cornflowerblue;
  gap: 40px;
  backdrop-filter: blur(10px);
}

.content_title {
  text-align: center;
  font-size: 36px;
  text-transform: uppercase;
}

.content_text {
  text-align: justify;
  line-height: 1.5;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Scroll</title>
</head>

<body>
  <div class="wrapper">

    <div class="fullscreen">
      <img src="tiger.jpeg" alt="" class="fullscreen_bg">
      <h1 class="fullscreen_title">Дикая природа</h1>
    </div>


    <div class="content">
      <h2 class="content_title">Заголовок</h2>
      <p class="content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium voluptas quidem pariatur perspiciatis sed iure asperiores? Aperiam omnis vel, quasi ab rerum, consequuntur tempore numquam, in sunt ut voluptatum similique. Voluptates voluptatem
        iste temporibus explicabo quam molestiae error est, accusantium ipsa beatae eligendi, accusamus ratione dolor repudiandae laboriosam culpa? Enim placeat consequuntur quasi culpa quos. Voluptates repellat dolore non dolor. Officia cum autem nulla
        ratione alias, quae numquam. Maxime cum possimus deserunt quibusdam incidunt nam placeat ipsa mollitia? Vero velit aliquam animi corrupti maiores error deserunt id explicabo ad qui? At, neque molestiae! Voluptates veniam optio suscipit ducimus
        sed maxime quia velit deserunt asperiores sequi doloribus obcaecati esse aliquam temporibus tempore, nam voluptatem illum, natus quam! Eaque voluptatem culpa atque!</p>

      <p class="content_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores veritatis dolorum aut quia accusantium amet eaque quae rerum animi illum exercitationem esse nostrum voluptate, explicabo possimus totam reprehenderit doloribus! Tenetur sapiente
        repellendus quisquam modi nisi odit facilis culpa, neque quia beatae dolor enim consectetur, eveniet dignissimos ipsa voluptatum quas nihil consequuntur fugit perspiciatis rem facere blanditiis. Quasi, voluptatibus odio. Quam neque amet recusandae
        in. Placeat fuga tenetur repellat, fugiat, odio labore optio neque assumenda architecto impedit hic quasi perspiciatis dolorum quas numquam eligendi maxime eum ratione ab inventore reprehenderit!</p>

      <p class="content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto dolorem, ad, non quisquam eius excepturi aspernatur quasi dolorum repudiandae, et animi! Nemo mollitia ullam ab amet nesciunt magni excepturi odio! Assumenda at minus atque tenetur
        a expedita aliquid, officiis dignissimos nobis quisquam, eos, odit soluta sit doloremque quas quasi id natus mollitia fugiat. Dolorum asperiores hic dicta, magnam delectus ullam!</p>
    </div>
  </div>
</body>

</html>

.fullscreen необходимо задать position: fixed, но тогда ломается вся верстка, все съезжает. если задаю фуллскрину изображение через .fullscreen {background: url()}, то нижнее фоновое изображение не блюрится при наложении на него .content. Как решить проблему?

БЛОГ НА HUSL

как сделать фиксированный фуллскрин таким образом, чтобы нижний контакт при скролле накладывался на фуллскрин?

Ответы (0 шт):