0
144
VistasDesplazamiento de imagen en bloque
¿Cómo puedo crear una imagen de desplazamiento en el cuaderno de visualización con el cuaderno de desbordamiento? Intente con una libreta adhesiva, pero la imagen de la libreta tiene sombra y la imagen bg no se desborda.
Quiero que permanezca como imagen de fondo dentro de la pantalla, pero no funciona. Punto superior bg en el cuaderno superior cuando se revela. Tal vez alguien tiene ejemplos?
.project-rules__note { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 600px; } .project-rules__note > img { width: 53vw; height: auto; position: sticky; top: 0; } .project-rules__note .container { width: 68vw; height: 100vh; position: sticky; top: 0; z-index: 2; } .project-rules__note .note { width: 100%; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; position: relative; overflow: hidden; padding-top: 100px; } .project-rules__note .bg-note { width: 68vw; height: auto; display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1; top: 0; left: 50%; transform: translate(-50%, 0); } .project-rules__note .bg-note::before { } .project-rules__note .bg-note img { width: 100%; } .project-rules__note .book { width: 100%; height: auto; display: flex; align-items: flex-end; justify-content: flex-start; z-index: 2; } .project-rules__note .book img { width: 100%; height: auto; max-height: 100vh; } <div class="project-rules__note"> <div class="container"> <div class="note"> <div class="img book"> <img src="https://jukachu.github.io/Lottery-cards/src/notebook.png" alt=""> </div> <!-- <div class="img bg-note">--> <!-- <img src="./img/bgnote.jpg" alt="">--> <!-- </div>--> </div> </div> <img src="https://i.ibb.co/74d27jf/bgnote.jpg" alt=""> </div> 
·
Santiago Gelvez
Responde la pregunta