Próbuję uzyskać czysty efekt paralaksy CSS działający bez stałej wysokości tła. Zostało to opisane w fewplaces, ale mają one wspólne ograniczenie, że warstwa tła musi mieć stałą, znaną wysokość.Czysta paralaksa CSS bez ustalonej wysokości tła?
Chciałbym uzyskać efekt działający bez stałej, znanej wysokości tła z powodu dynamicznej zawartości.
Moje minimalne przykładem jest tutaj: https://jsfiddle.net/yf8oyben/
#container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
perspective: 1px;
overflow-x: hidden;
overflow-y: scroll;
}
.background {
transform: translateZ(-1px) scale(2);
width: 100%;
background: lightgreen;
height: 250px; /* Assumes bg height */
position: absolute; /* Assumes bg height */
top: calc(125px - 50vh); /* Assumes bg height */
}
.foreground {
background: rgba(0, 0, 255, 0.5);
width: 100%;
position: absolute; /* Assumes bg height */
top: 250px; /* Assumes bg height */
}
<body>
<div id='container'>
<div id="group1">
<div class="background">
<div style="height: 10rem"></div>
<center>Banner</center>
<div style="height: 10rem"></div>
</div>
<div class="foreground">
<div style="height: 10rem"></div>
<center>Content</center>
<div style="height: 100rem"></div>
</div>
</div>
</div>
</body>
To działa teraz, ale zakłada, że tło jest 250px, jak odnotowany w CSS. Czy można to usunąć i zachować efekt tak jak obecnie?
zmagałem się z tym problemem wiele i nie znalazłem żadnego możliwego rozwiązania, w zasadzie głównym problemem jest to, że rodzic nie może div ustaw jego wysokość na bezwzględny element div, dlatego musisz wstawić jedną linię js, aby ustawić jej wysokość. –