Parallax Pure CSS с перспективой, проблема высоты элементов ⇐ CSS

[Anonymous]

Я пытаюсь воссоздать эффект Pure CSS Parallax, но впервые я пытаюсь иметь медленный слой на заднем плане основного (с текстом, изображениями и другим контентом), простиранным для всей высоты страницы. Я не могу понять, как иметь медленную высоту слоя всей страницы длиной: он расширяется только до вышеуказанной линии сгиба.
Эффект параллакса отлично работает, но единственный способ, которым я обнаружил, что может сделать медленный слой полной высотой, - это установить эту высоту с помощью JS. < /P>
может кто -то помочь мне найти полное решение CSSS? Class = "Snippet-Code">

Код: Выделить всё

html,
body {
margin: 0;
padding: 0;
}

.parallax {
font-size: 30px;
height: 100vh;
overflow: hidden;
}

.content {
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: scroll;

&:before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20595.3%20595.3%22%3E%20%3Ccircle%20cx%3D%22297.6%22%20cy%3D%22297.6%22%20r%3D%22194.1%22%20fill%3D%22%231d1d1b%22%2F%3E%20%3C%2Fsvg%3E");
background-repeat: repeat;
background-size: 200px;
position: absolute;
opacity: 0.5;
inset: 0;
width: 100%;
height: 100%; /* 


Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?
Lorem ipsum dolor, sit amet consectetur adipisicing, elit. At, perspiciatis mollitia fuga in, officiis asperiores voluptatem esse sunt officia aut architecto a, vitae eos aperiam? Odit sit possimus vitae velit?

Подробнее здесь: https://stackoverflow.com/questions/796 ... ight-issue